Quick Guide to Mobile Devices Meta Tags

Posted on Monday January 09, 2012 / by Eric Potvin
array( 'msg' => "This is a simple carousel made in CSS3, with a little help with javascript/jQuery you can make this auto animated I am pretty sure, I'll have to lookup it up.", 'by' => 'Eric' ), 1359694800 => array( 'msg' => "Thank you for this clean slider! Is it possible to make an autoslide?", 'by' => 'Tom' ), 1337140800 => array( 'msg' => "Awesome article. Wanted to implement something like this on my homepage.", 'by' => 'Tom' ) ); ?>

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;
  marign: 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