+ 1

CSS image slider? How?

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.

9th Jan 2018, 8:09 PM
Bakhrom Akbarov
Bakhrom Akbarov - avatar
3 Antworten
+ 1
Very clear example. I'm going to try it. But is it possible to use background-image here?
10th Jan 2018, 7:13 AM
Bakhrom Akbarov
Bakhrom Akbarov - avatar
0
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! ­čśë
10th Jan 2018, 4:16 AM
Faisal
Faisal - avatar
0
Definitely! You can use nearly every modification there is in CSS, as long as it follows the same structure as in the example
10th Jan 2018, 1:22 PM
Faisal
Faisal - avatar