html div x,html - Scroll x with div - Stack Overflow

From what your code is explaining to me above it looks like each slide of your slider is going to be an image. If so, I recommend altering your slider to the following code below:

CODE SNIPPET:

.slider {

width: 100%;

max-width: 960px;

overflow: hidden;

}

.slider figure img {

width: 25%;

float: left;

height: auto;

}

.slider figure {

width: 400%;

position: relative;

margin: 0;

padding: 0;

animation: 10s slide infinite;

-webkit-animation: 10s slide infinite;

}

@-webkit-keyframes slide {

0% {

left: 0%;

}

16% {

left: 0%;

}

33% {

left: -100%;

}

49% {

left: -100%;

}

66% {

left: -200%;

}

82% {

left: -200%;

}

100% {

left: -300%;

}

}

Rather than having a specific DIV each time to call your img class, we can instead just use the actual img tag. Along with that, in this method I've used the keyframes css to control the slide images positioning.

Should you really want to control this with div content, you could simply wrap the images in your div and alter the class .slider figure img to .slider figure divto include other types of content.

I hope that this helps you in your endeavours.