Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating an image slider using only CSS3

Creating an image slider using only CSS3

Creating an image slider using only CSS3
 
  • Currently 4.5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4.5/5 (3 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Usually image sliders are created in JavaScript, but with release of CSS3 this can be done in CSS3 without JavaScript. An image slider in the current article is quite simple to demonstrate that elaborate things can be achieved keeping the minimum code.

HTML code

The image slider consists of several basic elements: "image-slider", "slide-frame", "slides", "navigation". Each element is a tag div with an attribute id of its own name.

The "image-slider" element is a base of the image slider and incorporates all elements.

The "slide-frame" element consists of default image and "slides" element. Default image and "slides" element are used to show the default image if none of the images is selected in the slider on the other hand they are used to show "slides" element when one of the images has been already selected. 

The "slides" element contains images for the slider.

The "navigation" element contains links for navigation between slides (images) where each link is a tag a with an anchor name which points to corresponding image (target element).

<div id="image-slider">
  <div id="slide-frame">
    <img src="nature1.jpg" alt="" />
    <div id="slides">
      <img id="slide1" src="nature1.jpg" alt="" />
      <img id="slide2" src="nature2.jpg" alt="" />
      <img id="slide3" src="nature3.jpg" alt="" />
      <img id="slide4" src="nature4.jpg" alt="" />
      <img id="slide5" src="nature5.jpg" alt="" />
    </div>
  </div>
  <div id="navigation">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <a href="#slide4">4</a>
    <a href="#slide5">5</a>
  </div>
</div>

CSS code

The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.

#image-slider {
  margin: 100px auto;
  width: 500px;
}

#slide-frame {
  height: 375px;
  overflow: hidden;
}

#slides {
  height: 375px;
  overflow: hidden;
  position: relative;
}

#slides img {
  position: absolute;
  top: 0;
  left: -500px;
}

#navigation {
  margin: 5px 0 0 0;
  text-align: center;
  z-index: 10;
}

#navigation a {
  text-decoration: none;
  background: #003C72;
  padding: 2px 6px;
  color: #FFFFFF;
  display: inline-block;
}

#navigation a:hover {
  background: #0182C4;
}

In the code above, the width of the "image-slider" element is fixed and equals to the width of one of the images inside the "slides" element.

Also the value of CSS property position is set as relative to the element "slides" and absolute to all its images inside. This makes all the images to be in the same place and overlay each other.

As can be seen for all images inside the element "slides", CSS property left has a negative value which equals to the width of one of the images. It's used to set the initial position of the images, placing them out of the element "slides". It's used for animation when the next slide appears from the left side.

CSS code for animation and navigation

In the following example CSS property transition is used for animation. This is new property which was added in CSS3.

CSS property transition has the following syntax:

transition: transition-property transition-duration transition-timing-function transition-delay;

The image slider shows the next image from left to right, so the value transition-property should be left, but the slider also uses opacity for more complex animation which means the value transition-property must be set to all. The value transition-timing-function is linear. But it also can be: linear, ease, ease-in, ease-out, ease-in-out or cubic-bezier(n,n,n,n). The values transition-duration and transition-delay are 400ms. They can be changed to alter the speed of animation.

#slides img {
  z-index: 1;
  opacity: 0;
  /* animation */
  transition: all linear 400ms;
  -o-transition: all linear 400ms;
  -moz-transition: all linear 400ms;
  -webkit-transition: all linear 400ms;
}

#slides img:target {
  left: 0;
  z-index: 5;
  opacity: 1;
}

In the code above the :target selector is used to target the image if we click on the corresponding link in the element "navigation". When the image is targeted, CSS property left is set to 0 to show this image in the element "slides".

Also in this code, CSS property z-index is used. It is needed here to overlay other images by the targeted one.

Live demo

Here is improved version of the slider without page scrolling: creating an image slider using only CSS3 (without page scrolling).


 

Read also

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Creating CSS3 button with rounded corners

Creating CSS3 button with rounded corners

Box with rounded corners using CSS3

Box with rounded corners using CSS3

Discussion (total 4 comments)

AlessVill
August 02, 2013 at 12:16 pm
IT IS SO USEFULL SCRIPT 'COS ABOUT ITS SIMPLICITY IT CAN BE USED ON WAP OR MOBILE DEVICES ONES. BUT I THINK IF ON 'width' PROPERTE MESUREMENT UNITS ISTED OF pixel IT IS USED: proportion porcent [%] FOR SAMPLE: <img width=100% /> IN THIS CASE AN IMAGE (it is obvíous in hi-rex at least 96dpi) COULD BE SHOW ON PC SCREEN AS GOOD MAGNIFY FROM SIDE TO SIDE AND THEN BEEN CAPABLE TO SHOW SO GOOD THE CONTENT OF IMAGE EVEN ON NOT SMARTPHONES WHEN YOU TRUN VIEW SCREEN ON MOBILE FROM: vertical TO horizontal OR VICEVERSA. AS END MAY BE IT COULD BE USEFULL USE A GENERAL <center>...SLIDER SCRIPT...</center> TO IMPRUVE VIEWING ON DIFFERENT BROWSER GETTING A EASY AND BETTER EXPERIENCE ON NET NAVIGATION TO USER.

Signed: Aless.
THANKS ABOUT READ
sarah
September 23, 2013 at 09:15 am
How do I avoid the page jumping with the id scroll? I used the same code as above but lower on the page.
ex: http://www.respasalon.com/blog-test.php
Administrator User
Administrator User
September 23, 2013 at 02:17 pm
I thought a lot about it and I got some ideas on how I can re-develop it, but this time without scrolling. I am going to write another article with new slider. I will write to you when it's done.
Administrator User
Administrator User
September 24, 2013 at 05:42 am
Here is improved version of the slider without page scrolling: http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3_without_page_scrolling.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation