CSS image slider? How?

Question

Hello, dear programmers.
I saw some templates of CSS image sliders on the internet. I tried but couldn't understand principles of their code. Please, explain me and other Sololearners, how to make an animated image sliders with automatic transition using only CSS, without JavaScript or jQuery.

PLEASE, EXPLAIN IN DETAILS!

Thanks in advance.

Answer 1

Very clear example. I'm going to try it. But is it possible to use background-image here?

Answer 2

CSS animations can be done by using some built-in functions to attach to an element.

Say you have a <div> element with an id 'anim', and you want to move it to the right 100 pixels. To start, give an animation name that will be used to reference that certain element when creating the animations, like this:

#anim{
width: 100px;
height: 100px;
position: relative;
background-color: #aa0000;
animation-name: test;
}

This will create a red square and make the word 'test reference it when creating the animations.

To start moving the element, you should add a duration for the animation to last for:

#anim{
width: 100px;
height: 100px;
position: relative;
background-color: #aa0000;
animation-name: test;
animation-duration: 5s;
}

This makes the animation last 5 seconds.

To start moving it, create a section outside of the curly brackets that looks like this:

@keyframes test{
}

This will set key frames for the animation within that 5 second time span.

Within the curly brackets should be what you do with the element. In this case, we want to move it to the left 100 pixels. To do that, we would write this:

@keyframes test{
from{left:400px};
to{left:300px};
}

This sets the starting position of the element at 400px from the left of the screen, and moves the element to 300px in the span of last 5 seconds. All together, it should look like this:

#anim{
width: 100px;
height: 100px;
position: relative;
background-color: #aa0000;
animation-name: test;
animation-duration: 5s;
animation-timing-function: linear;
}

@keyframes test{
from{left:400px;}
to{left:300px;}
}

animation-timing-function will set the speed of the animation throughout the 5 seconds, with linear making it the same speed throughout.

I really hoped this answered your question about animations with CSS, and hopefully you can make that image slider with it! 😉

Answer 3

Definitely! You can use nearly every modification there is in CSS, as long as it follows the same structure as in the example