CODEWITHSUNDEEP
htmlcssslideshow
user4634071
user4634071

Reputation:

Modifying the html codes of Github

I have used the codes of the following link to create slideshows,

here is the link

it does work for four images, I have 5 images, I could not sort it out for 5 images,

Can anyone help me please. Thanks

Upvotes: 0

Views: 42

Answers (1)

rekire
rekire

Reputation: 47965

There are two things you need to fix at first the width is calculated 710 * N where N is in the example 4. So you need to patch this line first from:

width: 2840px; /* 710 * 4 */

to:

width: 3550px /* 710 * 5 */

The next step is to extend the keyframe to show the fifth element, then you also need to recalculate the percentage with is not hard from:

@keyframes slideshow {
    0%  { margin-left:  0.5%; }
    25% { margin-left: -100%; }
    50% { margin-left: -200%; }
    75% { margin-left: -300%; }
}

to:

@keyframes slideshow {
    0%  { margin-left:  0.5%; }
    20% { margin-left: -100%; }
    40% { margin-left: -200%; }
    60% { margin-left: -300%; }
    80% { margin-left: -400%; }
}

You can omit AFIK now all other prefixes. Check also this fiddler as example: http://jsfiddle.net/avze5shj/

Based on the comments I extended the example with a better timing: http://jsfiddle.net/avze5shj/1/

Upvotes: 1

Related Questions