Simple Image carousel using CSS3 and jQuery

The wave of implementing visually attractive web pages is very popular lately. CSS3 and jQuery can be a very good help when you need to build these new fancy way to display information to the user.

One of these is definitely the carousel. This way to display images is getting very popular but can be cumbersome or difficult if you like to match it with your current website design.

Here's a simple code to create a nice and easy carousel with minimal CSS3 and jQuery code.

HTML

In this example, I put 4 of the 7 wonders of this world. Using a simple menu and the list of these images and a small description.

<nav id="list">
  <a>Stonehenge</a>
  <a>Machu Picchu</a>
  <a>Great Wall of China</a>
  <a>Giza Pyramids</a>
</nav>

<section id="carousel">
  <div id="images">
    <figure>
      <img src="/images/7-wonders-stonehenge.jpg" width="400" height="300" alt="7 Wonders Stonehenge" />
      <figcaption>
        Stonehenge <span>United Kingdom</span>
      </figcaption>
    </figure>
    
    <figure>
      <img src="/images/7-wonders-machu-picchu.gif" width="400" height="300" alt="7 Wonders Machu Picchu" />
      <figcaption>
        Machu Picchu <span>Peru</span>
      </figcaption>
    </figure>

    <figure>
      <img src="/images/7-wonders-great-wall-of-china.jpg" width="400" height="300" alt="7 Wonders Great Wall of China" />
      <figcaption>
        Great Wall of China <span>China</span>
      </figcaption>
    </figure>

    <figure>
      <img src="/images/7-wonders-giza-pyramids.jpg" width="400" height="300" alt="Giza Pyramids" />
      <figcaption>
        Giza Pyramids <span>Egypt</span>
      </figcaption>
    </figure>
  </div>
</section>

Javascript (jQuery)

This little code will display the image and description based on the wonder the user selected.

$(document).ready(function() {
  $('#list a').click(function() {
    var index = $(this).index();
    pos = index * -400;
    $("figure").css("-webkit-transform","translate(" + pos + "px, 0px)");
    $("figure").css("-moz-transform","translate(" + pos + "px, 0px)");
    $("figure").css("-o-transform","translate(" + pos + "px, 0px)");
    $("figure").css("-ms-transform","translate(" + pos + "px, 0px)");          
    $("figure").css("transform","translate(" + pos + "px, 0px)");              
    $("#list a").removeClass('selected');
    $(this).addClass('selected');
  });
  $("#list a:first-child").addClass('selected');
});

CSS

Now, here's the CSS code that will make everything works properly.

div#images {
  width: 1600px;
}
nav#list {
  margin: 1em auto;
  text-align:center;
}
nav#list a {
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px 1px #bbb;
}
nav#list a {
  border: dotted 1px #aaa;
  cursor: pointer;
  padding: 2px;
}
nav#list a:hover, nav#list a.selected {
  background: #eee;
  border: solid 1px #aaa;
}

figure {
  float: left;
  height: 300px;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 400px;
  -webkit-transition:all 1.0s ease-in-out 0s;
  -moz-transition:all 1.0s ease-in-out 0s;
  -o-transition:all 1.0s ease-in-out 0s;
  -ms-transition:all 1.0s ease-in-out 0s;        
  transition:all 1.0s ease-in-out 0s;        
}
figcaption {
  background: rgba(255,255,255,0.7);
  bottom: 20px;
  font-size: 1.4em;
  margin: 0;
  padding: 0.5em 1em;
  position: absolute;
  text-shadow: 1px 1px 1px #fff;
  width: 100%;
}
figcaption span {
  color: #666;
  font-style: italic;
  font-weight: bold;
  font-size: 0.8em;
}
section#carousel {
  height: 300px;
  overflow: hidden;
  margin: 0 auto;    
  position: relative;
  width: 400px;
}

Now, you can easily add the other 3