WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+7Pin on Pinterest2Share on LinkedIn0


If we talk about Image Sliders, there are multiple times when you are confused and wondering as to which Image Slider to integrate in your website. Usually, people go on the Internet, search for a Image Slider script that most probably suits their taste, download it, and try to integrate it. Almost all of these Image Sliders are built using CSS, HTML and one or the other JavaScript libraries like JQuery. If you are not very experienced with such a task, you may have a very hard time to make the Slider look and behave like you want it to do. And if you are trying to integrate this into WordPress, you will go through hell if some plugin conflicts with your Slider scripts.

So, today I will show you how to make a cool looking Image Slider using only CSS3 and HTML. You can forget about using any kind of JavaScript or any conflicts with your existing plugins.


First, we will write some HTML for the controls and images. This is really simple to understand as its only a bunch of radio buttons and images that are arranged in a list. Everything is wrapped in a div called slider and the images list is wrapped in another div called sliderinner. The real magic will happen through the CSS code which will be stored in another file called sliderstyle.css referenced in the beginning of this code. Make sure to change the image paths if you are using your own images. Copy the following code into a HTML file and save it with any name.

<!doctype html>
<meta charset="utf-8">
<title>CSS3 & HTML Slider</title>
<link href="sliderstyle.css" type="text/css" rel="stylesheet">

<h1>Pure CSS3 & HTML Slider</h1>
   <div class="slider"> 
        <input type="radio" id="control1" name="controls" checked="checked"/>
        <label for="control1"></label>
        <input type="radio" id="control2" name="controls"/>
        <label for="control2"></label>
        <input type="radio" id="control3" name="controls"/>
        <label for="control3"></label>
        <input type="radio" id="control4" name="controls"/>
        <label for="control4"></label>
        <input type="radio" id="control5" name="controls"/>
        <label for="control5"></label>
        <div class="sliderinner">
                    <img src="images/1.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 1</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    <img src="images/2.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 2</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    <img src="images/3.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 3</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    <img src="images/4.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 4</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    <img src="images/5.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 5</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>


Make another file called sliderstyle.css and paste the following code into it :-

 @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);

* { margin: 0; padding: 0; }

body {background-color:#666;}
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.slider {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;

.sliderinner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

.sliderinner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);

.sliderinner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;

.sliderinner>ul>li>img {
    margin: auto;
    height: 100%;

.slider input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;

.slider label {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;

.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }

.description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-family:Archivo Narrow;
    z-index: 1000;
.description-text {
    background-color: rgba(0,0,0,.8);
    top: 0;
    z-index: 4;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: #fff;

Make sure that both your HTML and CSS files are in the same place. Also, check the image paths. The optimum image size for this slider is 640×320 pixels. You can change it but you will have to change it in the CSS files also. Here is a live working demo of the slider in action and also link for you to download the demo files :-
Slider Demo
Download Files

What Next?

You can try integrating this slider into WordPress and let me know if you are able to do it. Also, send any comment or feedback you have.

Share on Facebook0Tweet about this on TwitterShare on Google+7Pin on Pinterest2Share on LinkedIn0
  1. mahadi left a comment on August 16, 2016 at 4:41 am |


  2. KT left a comment on May 30, 2016 at 4:51 pm |

    Thanks for the codes, it seems lots of people asking the same questions autoplay.

    Anyone found out what to add to get it autoplay?

  3. David left a comment on April 9, 2016 at 6:50 am |

    Thanks for this tutorial, the slider looks great. But is there a way to add labels to the radio-buttons? The label-tag doesn’t seem to work properly…

  4. huagongkeji left a comment on March 21, 2016 at 9:40 pm |

    Electrostatic spray is to use solid powder solvent instead of the liquid form, the high voltage makes powder coating negatively charged, With the help of electrostatic attraction, it is adsorbed on the surface of the workpiece to be coated, it is the coating method obtained after being heated and melted (or cured). Electrostatic spray is a new technology, what the powder coating we used does not contain a solvent and a dispersion medium and other liquid ingredients, when we use it, there is no need of dilution and adjusting the viscosity, itself can not flow, after melting it can flow, it will not like a liquid coating adhered to the surface of the workpiece. Therefore, electrostatic spray coating has the features of high efficiency, excellent film properties, solvent evaporation, little environmental pollution, energy consumption less, simple process, short production cycle, low cost, easy to paint automation etc..

    FIPFG coating process can be directly coating the surface of the electrostatic spray products, to be closely integrated with the coating surface with a high degree of protection, good adhesion, anti-aging performance advantages. However, if the powder contains a small amount of PTFE and wax wrinkle agent, it will significantly affect the adhesion of the strip, therefore, we should pay close attention. At present, the technology has been widely used by the electrical industry.

  5. Zaira left a comment on March 17, 2016 at 8:32 pm |

    To make it start automatically you have to use animation css property with hscroll for example. http://www.casquettemagasin.com/casquette-nba-brooklyn-nets-c-1_4.html

  6. James left a comment on October 9, 2015 at 9:37 am |

    Is there a way to have the slider autoplay?

  7. James left a comment on October 7, 2015 at 4:16 pm |

    Is there a way to incorporate left/right arrows as well as set this to auto play?

  8. Steve left a comment on September 27, 2015 at 7:35 am |


    I tried adding this to my WordPress site here: http://www.stableawareness.com.au/

    I adjusted the CSS to display slides as 960 x 400, and included the following HTML in my page:

    However, only 5 of the the slider navigation circle buttons display. Can you help please?

  9. Yasmine left a comment on July 22, 2015 at 10:16 am |

    Is it possible to have the captions placed below the image? I do not want the captions to cover the images at all. Thanks!

  10. priority left a comment on June 11, 2015 at 1:36 pm |

    How should edit css for 6 images? Help!!!

  11. Guy Haglund left a comment on May 28, 2015 at 4:17 pm |

    Thanks Jai Nischal — I’m working on modernizing my website and I want the portal page to have a loop of images sliding in as seems to be pretty common these days. The effect of your demo is exactly what I want, but I want it to be without the radio buttons. Will this require some Javascript? I have a pretty good grasp of basic programming practice. Can you give me some hints?
    Thanks again!

  12. dailytut left a comment on March 30, 2015 at 8:43 am |

    This will come very handy now. Thank you and keep bringing more css tutorials please. it will be very helpful for me as i am just started with CSS3 via codecademy.


  13. Ashfaq Ahmed left a comment on December 29, 2014 at 2:43 am |

    Great work! I add more images and edit css and it’s work fine is ther a way to add Next/Prev options and also can we make it auto play ?

  14. duchet left a comment on December 24, 2014 at 11:51 am |

    It works , but it cannot start automatically

    • Luko left a comment on January 16, 2015 at 5:41 am |

      We’re talking about transition property on this. To make it start automatically you have to use animation css property with hscroll for example.


  15. mersin evden eve left a comment on November 11, 2014 at 8:47 am |

    nice… very nice invdent

  16. Prajakta Chachre left a comment on September 30, 2014 at 12:32 am |

    Thanks, it work.

  17. Anime left a comment on September 3, 2014 at 11:42 pm |

    Great script, it work.

    Thank you.

  18. Susan Meko left a comment on August 23, 2014 at 2:30 am |

    Nice work and the demo works in Mozilla normal and mobile both. But is it compatible with all browsers?
    Otherwise it is really good work done. Can I use it (with customizations) on my coming projects?

    Susan Meko

  19. Eraclio left a comment on August 20, 2014 at 3:44 pm |

    Very good slider! I like slider which don’t use JAvaScript, like this one:
    It seems like all of them use target pseudo-class in CSS3.

  20. Steph left a comment on July 13, 2014 at 12:30 pm |

    Thank you very much for this code, really appreciate it as I am only learning web design. I have changed the width of the slider to be the same size as my images, but now the alignment is out by 5 px to the left and when it slides over to the next image the last 5px of the previous image is displaying. What did i do wrong and how do i fix it?

    Thank you!

  21. name left a comment on May 29, 2014 at 11:02 pm |

    It works….good stuff

  22. Yoer left a comment on May 15, 2014 at 1:34 am |

    Thanks for your tutorial, but image changes aren’t auto,
    for example, every 3 seconds, image 1 will slide to image 2. So we don’t need push button for every changes

  23. Ronald left a comment on April 15, 2014 at 11:02 pm |

    Nice…very nice indeed

  24. arefin bibmt left a comment on March 5, 2014 at 3:17 am |

    nice work. css3 and html work is very clear.

    thanks again.

  25. Rams left a comment on March 3, 2014 at 2:25 am |

    what to do for auto slide?

  26. diego left a comment on February 22, 2014 at 10:29 am |

    how to add more items (for example 8 items)

    • zare sonceto left a comment on June 18, 2014 at 5:00 pm |

      would like to know too, tried to expand it, but it works only till the fifth image

      • Kosy left a comment on August 23, 2014 at 5:27 pm |

        I managed to get it to work with more images but its not very efficient. If u still need help, please reply this comment

  27. Indonesia Tourism Guide left a comment on February 6, 2014 at 7:04 pm |

    Great script, it work.
    But it cannot automatically sliding, isn’t it ?
    Or in my browser only ?

  28. daniel left a comment on January 13, 2014 at 6:56 pm |

    the mobile experience with this demo is not good.
    on my galaxy s3 I couldn’t move on to the next image

    • Jai left a comment on January 13, 2014 at 11:59 pm |

      This demo is for the purpose of showing what can be achieved through CSS/HTML. For mobile, you will have to optimize some more.

    • DMGoncalves left a comment on January 14, 2014 at 7:27 am |

      For the record, it worked fine for me on my iPhone 5c / Safari.

      The default Android browser is not the best. Chrome may work better (unfortunately I do not have time to test this now).

      Nice demo!

Leave a Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project