The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> image slider how to get more images, CSS slider will only show 5 images how can i get more
oddcarout
post 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;
    }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:05 AM