Home Carbon Ads Image Slider Using HTML And CSS Only

Image Slider Using HTML And CSS Only

slider

You would have seen very heavy JavaScript based sliders. These JavaScript based sliders make the webpage slower and also don’t work if user has disabled JavaScript interpretation in browser. One solution to this problem is don’t use those sliders, but how would you implement a slider without JavaScript? This article is the answer to that question. I will show a proper working modal of a slider which has been made without JavaScript.

View Demo

index.html

<!doctype html>
<html>
<head>
    <title>QNimate Slider</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="slider-holder">
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <div class="image-holder">
            <img src="1.jpg" class="slider-image" />
            <img src="2.jpg" class="slider-image" />
            <img src="3.jpg" class="slider-image" />
        </div>
        <div class="button-holder">
            <a href="#slider-image-1" class="slider-change"></a>
            <a href="#slider-image-2" class="slider-change"></a>
            <a href="#slider-image-3" class="slider-change"></a>
        </div>
    </div>
</body>
</html>

style.css

        .slider-holder
        {
            width: 800px;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }
       
        .image-holder
        {
            width: 2400px;
            background-color: red;
            height: 400px;
            clear: both;
            position: relative;
           
            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }
       
        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }
       
        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }
       
        #slider-image-2:target ~ .image-holder
        {
            left: -800px;
        }
       
        #slider-image-3:target ~ .image-holder
        {
            left: -1600px;
        }
       
        .button-holder
        {
            position: relative;
            top: -20px;
        }
       
        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }

We have three .jpg images each of width 800px and height 400px. We put them left floated on the image.holder div. Now we move the div left and right according to the anchor clicked. This is a good working method and the coding style is also not dirty.

Conclusion

I showed how to create a awesome slider using HTML and CSS only. This consumes less browser memory and computation power. It also works if JavaScript is disabled. Thanks for reading.


Narayan Prusty
Data URI TutorialHTML Script Tag Tutorial with Examples
Comments: 60
  1. Lemmontville
    4 years ago

    You can also use below code for simplification of image-slides

    ReplyCancel
  2. 4 years ago

    Awesome website you have here but I was wondering if you knew of
    any community forums that cover the same topics discussed in this article?
    I’d really love to be a part of community where I can get responses from other knowledgeable individuals that share
    the same interest. If you have any recommendations, please
    let me know. Thanks!

    ReplyCancel
  3. 4 years ago

    I cant create a webpage.

    ReplyCancel
    • Lemmontville
      4 years ago

      Please open notepad and use the structure:

      My first Webpage

      This is Aljon’s first web page

      ReplyCancel
  4. 4 years ago

    really i need this for my html webpage. its very very helpful for me Thank So Much

    ReplyCancel
  5. mari
    4 years ago

    this coding is only single page slide.not in multi pages. multi pages slide code send me. use my project!

    ReplyCancel
    • 4 years ago

      same situation here… i also need multi image slider without java for school project

      ReplyCancel
  6. mari
    4 years ago

    i will tried for html code.some error in running time.you find some solution reply.
    100 percent institutional delivery
    Yes
    No

    ReplyCancel
  7. mari
    4 years ago

    how will use image slider in html only

    ReplyCancel
  8. Lana
    4 years ago

    Works great for desktop. Thank you very much!
    Do you have similar solution for mobile? simple mobile horizontal swipeable gallery?

    ReplyCancel
  9. Liam
    4 years ago

    Is there a way to have the selectors show which slide is active?

    ReplyCancel
  10. jazzie
    5 years ago

    if it did not work maybe you didn’t changed the css file name in the link at the header :)

    ReplyCancel
  11. pepe
    5 years ago

    Hi,
    Unfortunately, I don’t see the buttons on top of the image.
    Any suggestion?

    ReplyCancel
    • 5 years ago

      Hi,
      I had the same problem and it was because the pictures that i used were larger than 800×400.So i’ve set width: 800px; and height: 400px; for the pictures and now it works just like in the demo.

      ReplyCancel
    • kawsu
      5 years ago

      make sence

      ReplyCancel
  12. abhishek kanaujia
    5 years ago

    SImple To auto Scroll images..

    HTML CODE

    <

    div id=”container”>

    CSS CODE

    container{

    margin: 0 auto;
    width:500px;
    height:400px;
    border:2px solid black;
    overflow:hidden;

    animation:one 35s;
    position:relative;
    background-size:500px 400px;
    transtion:2s ease;
    transtion-delay:2s;

    }
    @keyframes one{
    0%{background-image:url("1.jpg");}
    20%{background-image:url("2.jpg");}
    40%{background-image:url("3.jpg");}
    60%{background-image:url("4.jpg");}
    80%{background-image:url("5.jpg");}
    100%{background-image:url("6.jpg");}
    }

    ReplyCancel
    • priya
      4 years ago

      hi,
      I’m in need of a slideshow in jquery, HTML, CSS.can anyone pls help me.the quest is…

      Implement previous and next navigation controls(like a slide show) with animation using jQuery.
      Get Input from the user to load a number of frames to be navigated.
      In UI by default first frame should be loaded with frame index text inside of it then when I click next, previous button the corresponding frames should be loaded with the frame index text.

      ReplyCancel
  13. mega
    5 years ago

    how to link a html page in each slider????
    is there any way????

    ReplyCancel
  14. Matt
    5 years ago

    The first click doesn’t trigger an animation. It just jumps to the target. Is there a way to fix that?

    ReplyCancel
  15. Tushar
    5 years ago

    Thanx man…..its great
    its really working…..

    ReplyCancel
  16. 5 years ago

    Thank You.

    ReplyCancel
  17. 5 years ago

    i just want to make a slider with. html and css, ut actually it’s not working .i use it into my project ,in twig template in my own theme . so any one solve the problem ? so plz connect with me in whatsapp
    8016420609. or email address:-sahinsab391@gmail.com

    ReplyCancel
  18. Sushanth
    5 years ago

    Thank you very much for the post. It was really helpful.

    ReplyCancel
  19. Maha
    5 years ago

    it not work

    ReplyCancel
  20. Mohamed Asif
    5 years ago

    Guys here is the coding for automatic slide-show:-
    //html coding//

    <div id="outerbox">
    <div id="sliderbox">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    </div>
    </div>

    //css-coding//
    img {
    height: 400px;
    width: 800px;
    }

    outerbox

    {
    width: 800;
    overflow: hidden;
    margin-left: 300px;
    margin-top: 150px;
    }

    sliderbox

    {
    position: relative;
    width: 3200px;
    animation: slide 10s infinite;
    }

    sliderbox img

    {
    float: left;
    }

    @keyframes slide
    {

    0%
    {
    left: 0px;
    }

    20%
    {
    left: 0px;
    }

    25%
    {
    left: -800px;
    }

    45%
    {
    left: -800px;
    }

    50%
    {
    left: -1600px;
    }

    70%
    {
    left: -1600px;
    }

    75%
    {
    left: -2400px;
    }

    95%
    {
    left: -2400px;
    }

    100%
    {
    left: -3200px;
    }
    }

    ReplyCancel
  21. Vijin
    5 years ago

    Hi ,

    It is really working fine and cool. But is there anyway I can make this automatic , I mean images should slide without clicking the sliders , after a time interval

    ReplyCancel
  22. Linda
    5 years ago

    slider doesn’t work, i can only see 1 image and the button holder isnt there somebody help pls

    ReplyCancel
    • Mohamed Asif
      5 years ago

      instead of using position:relative; in button-holder use position:absolute;

      ReplyCancel
      • nilesh
        5 years ago

        slider is not working properly only one images show the image,
        afther the button-holder

        position:absolute;
        please reply as soon as

        ReplyCancel
    • AkShay Mahajan
      5 years ago

      same problem with me

      ReplyCancel
  23. JINAH YOON
    5 years ago

    How can I change the color (or format) of button when it is selected?

    By the way, thanks for your tutorial. It’s super helpful!!

    ReplyCancel
    • Mohamed Asif
      5 years ago

      use .slider-change:hover{
      color:#333;
      box-shadow:0px 0px 35px #333;
      }

      ReplyCancel
      • Mohamed Asif
        5 years ago

        its background-color:#333;

        ReplyCancel
  24. Mohamed Asif
    5 years ago

    Hi!! I have also tried this image slider it works fantastic for me,but the problem is when I add one or more images to the slider,the slide-change button disappears.I tried to solve the problem but I can’t.Please anyone help me to solve this.I want to add more pictures to it…

    ReplyCancel
  25. Aishwarya
    6 years ago

    Hello Sir,

    I have tried this but the images comes one by one , it could not be sliding.
    Pls reply me its an urgent .

    Thank You

    ReplyCancel
  26. Rhys
    6 years ago

    Hello,

    Great slider, however i am having one issue. The pictures all fit fine, i made them 800 by 400 so they fit to the slider, however the issue i have is when i click to go to the next picture, the page jumps down to the top of the slider?

    ReplyCancel
    • Lee
      6 years ago

      I’m having the same problem. Any solution?

      ReplyCancel
  27. 6 years ago

    how do i include buttons to a css image slider one for previous slide and another for next?

    ReplyCancel
    • 6 years ago

      i tried this but only first picture appears and no buttons to go for new image

      ReplyCancel
  28. michael
    6 years ago

    ok i tryed this but im still getting the same two problems one is that the over flow still shows on it and also when i click on the buttons nothing happins what gives

    ReplyCancel
  29. Dines
    6 years ago

    I tried this code. Everything works. But when i click on the button to move to the next image, it is not happening. Even i click on all the three buttons the part of a single image moves. Image is not changing.. Also a part of the image only spliced and shown. couldnt resize the image to the container size. kindly reply.

    ReplyCancel
  30. Mike
    6 years ago

    Is it possible to make 100 percent full page width and make responsive?

    ReplyCancel
  31. 6 years ago

    updated his profile picture.

    ReplyCancel
  32. Mang jojot
    6 years ago

    …..awesome …. this what i’m looking for… thanks….

    ReplyCancel
  33. 6 years ago

    Hello everyone,
    I am an young coder that is pretty good but when I tried implementing this slider in my website it bugs and shows like 2 of the images on the same slide and stuff like that. If anybody knows what is wrong please let me know.

    ReplyCancel
  34. Rachelle
    6 years ago

    Ok, so this slider is exactly what I’m looking for in my website. Let me add that I’m also a complete noob to this HTML and CSS language. Whenever I pop my images into the place where I’m supposed to, when I get to about the 3rd image, the buttons to click to go to the next image suddenly disappear. I’ve tried many things, but can’t get them back unless I delete the picture. If this makes sense to anyone and they are able to tell me what I’m doing wrong, please let me know because I REALLY want to stick to using simple CSS/ HTML coding to display my pictures. Thanks!

    ReplyCancel
    • Gillian
      6 years ago

      Hi Rachelle,
      Try changing your background color in the .slider-change section.

      .slider-change
      {
      display: inline-block;
      height: 10px;
      width: 10px;
      border-radius: 3px;
      background-color: yellow;
      }

      Gillian

      ReplyCancel
      • Rachelle
        6 years ago

        I tried. Nothing happened, until I deleted the image src in the html part, then the buttons reappeared. It’s not doing this when I put in the first few images. =/

        ReplyCancel
    • 6 years ago

      hey Rachelle,
      You are pretty good in HTML n CSS but as per your qunimate dp i guess you need to leave lt all and try Modeling :)

      ReplyCancel
  35. Jan
    6 years ago

    Hi Narayan.

    One problem with this. If this slider isn’t position on top of the page, but somewhere in the middle, it move window to align top of this slider to the top of the browser. Is it possible to change this?

    ReplyCancel
  36. frank
    6 years ago

    and making it responsive will be perfect

    ReplyCancel
  37. Stephen
    7 years ago

    Is there a way to make this auto-play without resorting to Javascript also?

    ReplyCancel
    • 7 years ago

      You can use CSS3 Animations to autoplay. You need to move the .image-holder

      ReplyCancel
      • Gillian
        6 years ago

        Dear Narayan Prusty, what do you mean with “move the .image-holder”?
        I would like that the slider can be moved manual or that it moves automatically after x seconds. Thanks.

        ReplyCancel

Leave a Reply to jazzie Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 60 Comments Web Development
Share this
Related Articles