image slider how to get more images, CSS slider will only show 5 images how can i get more |
image slider how to get more images, CSS slider will only show 5 images how can i get more |
oddcarout |
Jan 23 2017, 10:48 PM
Post
#1
|
Member Group: Members Posts: 62 Joined: 21-November 06 Member No.: 1,017 |
I was trying to figure out how to do sliding images on a webpage and I ran across a video by Vlad vasiljev entitled "How to Create a image slider is CSS". I watched it and replicated it. It works great for five images and I don't understand enough about CSS to know what is happening. I would like to increase the slider to 20 or more images.
If someone would be willing to explain to me how this works, and what adjustments I need to make that would be great. I want to understand it not just have it corrected. Thank you, Oddcarout CODE @keyframes slider{ 0% { left: 0; } 20% { left: 0; } 25%{ left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } #slider { overflow: hidden; } #slider figure img { width: 20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slider infinite; } |
Lo-Fi Version | Time is now: 29th March 2024 - 01:52 AM |