Slider with 3 automatic columns without javascript

Question

Slider with 3 automatic columns without javascript

Navigation

#1 by (1 votes)

1

I'm trying to make a slider that has control like that link , but automatic and that shows 3 images at the same time

I tried to implement the controls but it is not working could you help me?

link

html5 css3 slider

asked by anonymous 15.03.2018 / 20:57

1 answer

How to clear search results in a list after clicking a button? Center text within image

score 1 · Answer 1

Following is a Slider template with only CSS running in 3-in-3 images. It's all done in Flex so it's very responsive and easy to understand.

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

Here's the example I did: (click Run to view and then "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>