Create Forward/Back links for a CSS Keyframe Slider without Javascript

Question

I am trying to create a CSS image slider using keyframes that has navigation without Javascript. The end goal ideally would be a forward/back link or button as found in conventional sliders (that have Javascript).

I have this so far:

 <style type="text/css">
    @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }

    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
    }
     </style>


    </head>

    <body>

    <div id="slider">
    <figure>
    <img   src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Cheshire1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Derbyshire1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Devon1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Essex1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_GreaterManchester1a.jpg" alt>
    </figure>
    </div>

    </body>
    </html>

score 1 · Accepted Answer · edited May 23 '17 at 11:46

I'm just gonna link you to some resources which can help you accomplish that.

First, here's how to change something onclick in pure CSS (Scroll to "2017 Answer" Can I have an onclick effect in CSS?

And here's some useful info for changing values of other elements, on an example with :hover, it however works with :checked as well. How to affect other elements when a div is hovered I hope this helps you, although you'd probably have to use transitions instead of animations and maybe the scale property.

Create Forward/Back links for a CSS Keyframe Slider without Javascript

1 Answers1