Create a rotating product viewer


Add engagement, interest and functionality to products with a full 360-degree view of the desired object


Nua Bikes produce a very elegant and clean urban bike that has a minimal impact on the environment due to the simplicity in its design. The bikes are handcrafted and reflect the conscious commuter who needs to get around urban environments with ease.

The website needs to reflect the styling of the bike and this is always easy to do with photography when there is a strong product on display. The homepage features a large, fullscreen image of the bike that has been photographed from different angles so that the user can see the bike rotating on screen. The images change automatically and gives the user a chance to see the design of the bike in detail. When the product you are designing for has such clean, elegant lines and is made from quality materials such as titanium, carbon fibre and aluminium, then it is important that the styling of the site reflects the construction aesthetic.

It is so easy for designers to get carried away by adding more and more complex content to sites but sometimes all that is needed is good typography, navigation, simple colour and the product itself. Organising the content can be tricky, but the Nua Bikes site has managed to do this without overstating the simplicity of the design.


1. Add the images

To create a rotating image of a bike, we need to add five images to the body section of the page. Using jQuery a simple image rotator can be created which moves the image on every few seconds.

<div id="fader">
<img src="img/bike1.png"/>
<img src="img/bike2.png"/>
<img src="img/bike3.png"/>
<img src="img/bike4.png"/>
<img src="img/bike5.png"/>

2. Style the images

Now move to the head section of your page and add the style tags for the div tag that holds the images. This simply positions them relatively so that the JavaScript can change the images later on.

html, body{
height: 100%;
background-color: #f0f0f0;
padding: 20px;
#fader {
position: relative;
width: 100%;
height: auto;

3. Library link

The images have to be hidden and positioned on top of each other, so a link to the jQuery library is needed. This will aid the adding and removing of CSS to make each of the images appear at the appropriate time.

<script src=""></script>

4. Move through the images

After the link to the jQuery library the following code can be added. This hides all the images except the first one. They are positioned within the div tag so that they will be in the right position when they are called to fade in with the code in the next step.

$(function() {
$('#fader img:not(:first)').hide();
$('#fader img').css('position', 'absolute');
$('#fader img').css('top', '0px');
$('#fader img').css('left', '50%');
$('#fader img').each(function() {
var img = $(this);
$('<img>').attr('src', $(this).attr('src')).load(function() {
img.css('margin-left', -this.width / 2 + 'px');

5. Switch images

The ‘fadeNext’ function does the hard work of fading out the old image while fading in the next. This is called every three seconds by the set interval, which in turn calls the fadeNext function. Save this now and test it in your browser to see the images appear on the screen.

function fadeNext() {
$('#fader img').first().fadeOut().appendTo($('#fader'));
$('#fader img').first().fadeIn();
var rotate = setInterval(fadeNext, 3000);