Slider with 3 columns automatic without javascript

Asked

Viewed 634 times

1

html5 css3 slider

  • With CSS you cannot make the Slide Loop (unless the images are a Background of a Container), What you can do with the image tag is to all go to one side and then return by the same side as they were. Type 1 2 3 goes and after turn 3 2 1... If you want I can make a simple example for you automatic and infinite as you want...

1 answer

1

It follows a Slider template with only CSS running from 3 in 3 images. It was all done in Flex so it’s very responsive and easy to understand.

I did the animation with @keyframes so it is also very easy to move the intervals and the total duration of the animation.

Follow the example I made: (click Run to view and "Full Page" if you want to see Expanded Responsive)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wraper {
    height: auto;
    width: 80%;
    margin: 0 auto;
    display: flex;
    overflow: hidden;
}
.scroller {
    display: flex;
    width: 100%;
    animation: slidy 6000ms infinite;
}
.wraper .scroller img {
    min-width: calc(100% / 3);
    flex: 1;
    padding: 0 .5rem;
}
@keyframes slidy {
   0%{margin-left:0%;}
  20%{margin-left:0%;}

  25%{margin-left:-100%;}
  45%{margin-left:-100%;}

  50%{margin-left:-200%;}
  70%{margin-left:-200%;}

  75%{margin-left:-100%;}
  95%{margin-left:-100%;}

 100%{margin-left:0%;}
}
<div class="wraper">

    <div class="scroller">
        <img src="http://placecage.com/220/200" alt="">
        <img src="http://placecage.com/210/200" alt="">
        <img src="http://placecage.com/230/200" alt="">
        
        <img src="http://placeskull.com/210/200" alt="">
        <img src="http://placeskull.com/220/200" alt="">
        <img src="http://placeskull.com/230/200" alt="">

        <img src="http://fillmurray.com/230/200" alt="">
        <img src="http://fillmurray.com/220/200" alt="">
        <img src="http://fillmurray.com/210/200" alt="">
    </div>

</div>

  • Thank you, Hugo, but this way I couldn’t put the controls back and forth? This is my question, I can not implement these controls appearing 3 images at once

  • Daniela when you said you wanted it automatically I thought you wanted it running alone, no controls. To make both ways automatic and with control at the same time only with JS same... You can try to create an event that manipulates the slides by doling the images from 3 to 3 within a span for example and manipulate the @keyframes with JS, but I don’t know much about JS and I won’t know how to do it... just the same part of css I did like that... sometimes it helps you. https://www.youtube.com/watch?v=iXhS6KFPLY4&t=92s

Browser other questions tagged html5 css3 slider

You are not signed in. Login or sign up in order to post.