Howto Create An Image Slider With Pure CSS3

image slider Howto Create An Image Slider With Pure CSS3

Image slider is a popular effect and often used in portfolio sites and blogs. Most of these sliders are created by Javascript. But with CSS3’s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.

1. The HTML Markup

The HTML markup for image slider is so simple like this:

<div id="images">
    <img id="image1" src="1.jpg" />
    <img id="image2" src="2.jpg" />
    <img id="image3" src="3.jpg" />
    <img id="image4" src="4.jpg" />
    <img id="image5" src="5.jpg" />
</div>
<div id="slider">
    <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>
</div>

We list all images in a div with id="images" and the slide control in a div with id="slider". Each slide control button is an a tag with the target points to corresponding image.

2. Basic CSS

We will style the images and slide control with some basic CSS to make them beautiful:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

In this code, we specify fixed width and height for both #images element and its images. We also set the position="relative" for #images, and position="absolute" for all images as well as their left and top attribute. This will make all images are put in the same place, they overlay each other.

Notice the negative left attribute. It is used to set the beginning position of images, i.e. out of the #images div. Why do we do that? Because we want images slide from left to right into the #image div box.

But when we launch the script, the #images div box is completely empty. We don’t want that, so we set left:0 for first image to display it in the #images div box.

3. CSS3 Transition For Slider

To slide images with CSS3, we’ll use the transition feature. The CSS3 transition has the following syntax:
transition: transition-property transition-duration transition-timing-function transition-delay;

In our case, we need to slide from left to right, so the transition-property is left, but we will add some effect with opacity for cooler effect, so we use all for transition-property. The transition-timing-function should be linear. The delay and duration can be anything, I choose 1s.
So, the CSS3 for slide effect will be:

#images img {
    z-index: 1;
    opacity: 0;

    transition: all linear 1s;
    -o-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -webkit-transition: all linear 1s;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}

Here we use the :target pseudo code to target the image when we click on the slide control button. When the image is targeted, we set its left attribute to 0 to make sure the image is displayed inside #images div box.

In this code, there’s one more thing needed to be noticed. That’s the z-index attribute. Because we put all images in the same place, so, when we need to display the targeted image, we should make it overlay others by specifying a higher z-index.

So, the complete CSS for the image slider is:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

You can see the demo here:

One disadvantage of this method that the first image is always displayed as a background. If you really don’t want to have it, there’s a solution: don’t use CSS3 transition for left property (set left:0 for original images), and use CSS3 transition for opacity only.

71 Comments

  1. Guys, do you have some codes there similar to that slider, but autoplaying… its not good to be dependent by the work of others but this is part of my learning, i’d like to learn even the basic of animation via css, i know the simple event mousever, mouse-out,in, enter, click, but i dont know that effects to slow or delay and that transitions, please can you help!

    regards, bradley
    email me.
    [email protected]

    Reply
  2. Thank for this informative post. It certainly helped me a lot. I would like to see something on playing videos in a slider. All I get is a slider that plays youtube videos. I would like to know if its possible to reference videos from a database? Your assistance would be greatly appreciated.

    Reply
  3. the solution to not having the first image shown when the page is loaded,comes with a simple trigger script.

    $(document).ready(function () {
    $(“#shownimage”).trigger(‘click’);
    });

    1

    2


    3
    4
    5

    the rest of data just the same, except to not include on the css
    #images img:first-child {
    left: 0;
    }

    Reply
  4. Thanks alot for your tutorial. I am having troubles of making the first image in the image gallery appear in default when i run the page. Whenever i run the page on chrome, the first image doesn’t appear. It only appears when i press the number ‘1’. May i know how should i fix this problem?

    Reply
    • Hi,
      Am raji… am learning css right now..may i know how to include this file in html?

      Reply
  5. Hi. Thanks a lot for sharing this tutorial, I really appreciate your explications.

    Still I have one problem, and I was wandering if someone might know the cause and solution to it…

    The slider works perfectly fine, apart the thing that every time I change a photo, its causing a small movement of the whole page, which goes a bit up. This problem doesn’t occur when the rest of the content on the page is short enough so that it doesn’t have a vertical scroll, or when the position of the slider is fixed…

    Thanks a lot for propositions, solutions, links…

    n.

    Reply
  6. “One disadvantage of this method that the first image is always displayed as a background. If you really don’t want to have it, there’s a solution: don’t use CSS3 transition for left property (set left:0 for original images), and use CSS3 transition for opacity only.”

    Can anybody please help me with getting rid of that first background image? I cant seem to get it working like you said..

    Reply
    • hi rilwis, Thank you so much for this tutorial. I learned a lot. My photos each have a title associated to them and I was hoping to make each title show up once the image is selected. Do you have any way of doing that?

      Thanks a lot

      Reply
  7. Can I add some permalink for each image
    and change to wipe effect ?

    Reply
  8. i have a problem regarding slider .
    the number alignment can’t centered using ur tutorial.

    Reply
  9. hey there, this is working great, but the number buttons are aligned to the left while the photos are aligning to the center. any help to fix this up (i am doing a uni project).

    thanks a lot, great simple tutorial :-)

    Reply
    • Hey! I have the same question. I want to use arrows instead of these numbers. It will be really great if anyone can help me on this. I am doing an assignment.
      Thank you.

      Reply
  10. Thanks for the tutorial, this is a really great way to build a slider. I know this is a bit late but if the commenter above wants some advice I found a way to show text while selecting the relevant image and then hide the text as you select a different image. Basically, you can use Jquery to do the job by using show and hide then using that in each . Its a great way to show text around the box (although this doesn’t show text within the box, im afraid). Finally, there is a problem with clicking an image and it centering the screen which is annoying but nothing breaking, trying to find a fix around that atm.

    Reply
  11. Thanks for the tutorial, it helped me out a lot. I need a unique caption underneath each image that only appears on hover and wondered if you knew a way to do that? I tried wrapping each in a and included a inside, but that seemed to break everything. I discovered that each individual img cannot be wrapped in another tag such as a figure or div in order for your method to work. Any suggestions would be greatly appreciated. Thanks!

    Reply
    • try with IE10 , because the problem in all other IE less than IE9 ,

      Reply
  12. I’m having problem with code. I have copied whole code and run. It works perfect! But when I modify the code by covering #img tag# with #anchor tag# , for making images as link. Css effect doesn’t worked out! Hope you understand. And Waiting for your valuable reply soon.

    Reply
  13. I must be missing something, I’ve inserted the HTML and CSS in it’s respective places (I think) and have uploaded everything FTP, but when I click on the button to go to the next image, it shows up in an expanded window. How in the world do I fix this??? Someone please help!

    Reply
  14. Hi,

    Thanks, this works great! The only issue i’m having is that when a button is selected for the next image, the entire page scrolls to the top of the image slider and does not stay at the top of the page. Any clue on how to fix this??

    Thanks,
    Sarah

    Reply
  15. How I wish this slider can work automatically, I will be the happiest man right now. I wanted to use slider, but all the slider I found affect the already working background slider and gallery and I am looking for css and not jquery.

    Reply
    • I came up with a workaround to have my slides appear automatically while still having this particular slider. Basically I have to run two overlapping slideshows, one being animated (using the CSS3 “animation” codes and keyframes), and the other one being the slideshow shown on this site. if you arrange your code correctly, you can have both slideshows running at the same time, which means your slides will work automatically, until somebody clicks on a number to go to s specific slide. See what I’m talking about at my website, http://quanwilliams.com.

      Reply
  16. I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not 100% sure. Any recommendations or advice would be greatly appreciated. Cheers

    Reply
  17. Hey Guys,

    Great post. Only one problem, I tried linking the images with an and when I did the transition went away, now it just jumps to the next image. Any ideas?

    Reply
  18. Scratch that, it seems I missed a whole portion of the tutorial some how. All fixed :)

    Reply
  19. Hey all, a quick question on this slider. It was very useful to me, however I need to know how to show the image underneath it. I read Jessica’s comment earlier but it did not make much sense to me (I am quite new to HTML and learning it at university), so would someone be able to help me out?
    What I have now shows an image underneath the slider, and works on my computer and browser, however when either one changes all of the aspects change. I just need to know how to show the initial image.
    Very good tutorial by the way.
    Thanks in advance, Will

    Reply
  20. I really enjoy slideshows in websites. Can you put a slider in a free WordPress blog? The theme is free too.

    Reply
  21. Simple, yet very efficient way of displaying many photos. Great tutorial – Thanks. Just wondering, is it possible to also include text under image?

    Thanks Again.

    Reply
  22. Great tutorial, thanks very much. This looks/works great in safari, and on iPad and iPhone very well!

    Unfortunately it doesn’t work properly for me in Opera and Firefox (latest versions). At the image’s destination position they disappear too far to the left and therefore displays only half the image. Is there a way to fix that?

    Also the slider is not working for me in IE 9. Without any prompting the images flick through one after another in half view and then stop at a half view of the final picture. When a number is pressed the final image comes up in full, but no other image will display. Any fix for that?

    Cheers

    Reply
  23. Thank you this is really usefull!
    Can you tell me if there’s a way to keep proportion on vertical images (portrait)?
    Thanks a lot!

    Reply
    • It’s work with :

      img { width:auto; height:auto; max-width:100%; max-height:100%;}

      but the image is not even centered.

      if i find something i tell you.

      Reply
  24. First image not showing up? Read on…

    I FINALLY figured out why my slider wasn’t working quite right – no image was displaying until one of the the numbers was clicked on. Well… instead of downloading the source files, I copied and pasted the code inside the code blocks on this page (because I’m using a CMS & external stylesheet). In the code block for the complete CSS, `#images img:first-child` is missing opacity: 1 whereas the downloaded source files are correct. But regardless, I want to thank you for a great snippet and a very well written tutorial!

    Reply
      • Almost two years too late but anyway here it goes:
        in the CSS ->

        #images img:first-child {
        left: 0;
        opacity: 1;
        }

        The opacity 1: part is missing.

        Reply
  25. Thank you so much for this tutorial. I learned a lot. My photos each have a title associated to them and I was hoping to make each title show up once the image is selected. Do you have any way of doing that?

    Thanks a lot

    Reply
  26. Normally I don’t comment on forums but I want everyone to know about what I found. I was searching for galleries, and i found this http://www.flashxml.net and at first it looked normal, but I found the best thing on a flash component; to edit your own settings live, and the customization is more complex than any other gallery and the best thing, they have this so called Live Demo for every product. Beside that, the products are very cool. That’s all I want to post. Hope it could help somebody, like I was. Good day everyone.

    Reply
  27. To amend my earlier comment, sometimes it will work to click through slides 2-5, but then, from one of those if I click back on “1” then the page will jump.

    Reply
  28. Thanks for this tutorial, it’s a big help. I’m slightly stumped on a part of it and was hoping you could help. The slideshow loads fine and everything is in place. But once I click on a slide 2 through 5, the page “jumps” down. Any ideas what may be causing this?

    Reply
    • It’s caused by the “#image1″ command. this creates an internal bookmark and it makes the site jump to that bookmark, which in this case is the latest image of your slideshow.

      I haven’t figured out a way around that, though. does anybody have a solution?

      Reply
  29. Is there a way to have the images automatically change after a set period of time? I noticed the transition: all linear 500ms; line, but it doesn’t seem to do anything in the example I’ve downloaded (Using the latest Chrome)

    Reply
    • Hornestly I don’t know a way to achieve that. The “500ms” in your comment actually relates with the speed of the transition. Every CSS based sliders I know need an “action” to start the effect, such as “hover”.

      Reply
  30. Thanks a lot for the tutorial! I’ve created a slider for my friend’s website based on this tutorial. It’s very easy to make and very useful.
    Thanks again!

    Reply
  31. Sorry to repeat my post, but some text disappeared. Thanks for the tutorial, it helped me out a lot. I need a unique caption underneath each img that only appears on hover and wondered if you knew a way to do that? I tried wrapping each img in a figure and included a figcaption inside, but that seemed to break everything. I discovered that each individual img cannot be wrapped in another tag such as a figure or div in order for your method to work. Any suggestions would be greatly appreciated. Thanks!

    Reply
  32. Thanks for the tutorial, it helped me out a lot. I need a unique caption underneath each image that only appears on hover and wondered if you knew a way to do that? I tried wrapping each in a and included a inside, but that seemed to break everything. I discovered that each individual img cannot be wrapped in another tag such as a figure or div in order for your method to work. Any suggestions would be greatly appreciated. Thanks!

    Reply

Leave a Reply