CSS3 only Image Slider and Carousel

I’ve been dabbling with CSS3 for some time with the aim of enhancing the user experience in modern browsers while offering a standard or degraded experience in older browsers such as IE6,7 and 8. My “experiments” have been confined to simple things that won’t impact how the page is used or functions, but enhances the experience by offering CSS3 polish in the form of drop shadows, rounded corners, and gradients, my own site for example does not use a single image for its styling, which means faster load times, faster render times, and less HTTP requests to the server per page request.

Ordinarily I would use jQuery to create animation effects but now support for CSS3 animations has matured a little and more browsers support them I decided I would recreate the jQuery scroller that I created for the homepage of this site in pure CSS3 and HTML5; I didn’t want to use JavaScript so I knew this CSS version wouldn’t scroll according to a time interval but would instead be controlled by pagination.

Demo


Works in the following browsers: Firefox 5 and above, IE10, Chrome, Opera, Safari.

The Markup

<div id="cssSlider">
   <figure id="image1">
      <img src="IMG_3677-1000x300.jpg" alt="">
      <figcaption>Zambezi Sunset</figcaption>
   </figure>
   <figure id="image2">
      <img src="IMG_42021-1000x300.jpg" alt="">
      <figcaption>Bateleur Eagle</figcaption>
   </figure>
   <figure id="image3">
      <img src="IMG_2592-1000x300.jpg" alt="">
      <figcaption>Common Seal</figcaption>
   </figure>
   <figure id="image4">
      <img src="IMG_3202b-1000x300.jpg" alt="">
      <figcaption>Loch Sunset</figcaption>
   </figure>
   <figure id="image5">
      <img src="IMG_2008-1000x300.jpg" alt="">
      <figcaption>White Tailed Eagle</figcaption>
   </figure>
   <figure id="image6">
      <img src="IMG_3602-1000x300.jpg" alt="">
      <figcaption>Caliach Point</figcaption>
   </figure>
   <div id="sliderPagination">
      <a href="#image1">1</a>
      <a href="#image2">2</a>
      <a href="#image3">3</a>
      <a href="#image4">4</a>
      <a href="#image5">5</a>
      <a href="#image6">6</a>
   </div>
</div>

CSS

#cssSlider {
   width: 700px;
   height: 210px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
}
#cssSlider figure {
   width: 700px;
   height: 210px;
   margin: 0;
   position: absolute;
   top: 0;
   left: -700px;
   z-index: 1;
   transition: all linear 0.5s;
   -o-transition: all linear 0.5s;
   -moz-transition: all linear 0.5s;
   -webkit-transition: all linear 0.5s;
}
#cssSlider figure:target {
   left: 0;
}
#cssSlider figure:first-child {
   left: 0;
}
#cssSlider figure figcaption {
   position: absolute;
   bottom: 0;
   right: 700px;
   z-index: 2;
   color: #fff;
   padding: 10px 20px;
   width: 660px;
   background: #000;
   transition: all linear 1s;
   -o-transition: all linear 1s;
   -moz-transition: all linear 1s;
   -webkit-transition: all linear 1s;
   opacity: 0;
}
#cssSlider figure:target figcaption {
   right: 0;
   opacity: 1;
}
#sliderPagination {
   position: absolute;
   right: 10px;
   bottom: 10px;
   z-index: 10;
}
#sliderPagination a {
   text-decoration: none;
   background: rgba(255,255,255,0.5);
   padding: 4px 8px;
   color: #333;
   border-radius: 20px;
   transition: all linear 0.5s;
   -o-transition: all linear 0.5s;
   -moz-transition: all linear 0.5s;
   -webkit-transition: all linear 0.5s;
}
#sliderPagination a:hover {
   background: #fff;
   color: #666;
   width: auto;
}

The lines highlighted in the CSS block above are the magic behind the whole thing.


   transition: all linear 1s;
   -o-transition: all linear 1s;
   -moz-transition: all linear 1s;
   -webkit-transition: all linear 1s;

The transition parameter basically says: when a transition is required i.e. for a pseudo class change (hover, target etc) then smooth it out and blend it to the pseudo elements attributes. If – for example – an anchor has a red background by default and a blue background on hover, the transition will blend between red and blue when the item is hovered. Let’s break it down a bit more:

  • all = here we are telling the transition parameter to transition all supplied attributes that are supported. So every attribute that is different between the default definition and the pseudo definition blend!
  • linear = the easing method to be used. A linear ease will be uniform from start to finish across the entire animation. EaseIn would mean its slower at the start and gets faster towards the end. There are many easing settings to choose from.
  • 1s = the duration of the animation. 1s is 1 second. You can define time unites in seconds(s), or milliseconds (ms).

8 thoughts on “CSS3 only Image Slider and Carousel

  1. This is a pretty awesome. But clicking the link also causes the page jump. Any idea how to prevent the page jump when clicking the anchor tags ?

Leave a Reply

Your email address will not be published. Required fields are marked *