CSS slider

Question

I can not understand why it shows only 4 slides.
https://code.sololearn.com/W87B0MsxWw4p/#html

Tell me where and what is wrong?

Answer 1

yes, recalculate the keyframes and add more slides with new values

Answer 2

You need more target hooks.
CSS after line 84
these show the slides
0, -600, -1200, -1800, -2400, -3000 etc.

Answer 3

yes, but first you should know how many slides you need. the more slides the more values

Answer 4

You can do it I think. If not I try to show you later (in 4 hours).

Answer 5

I see you made it. Great. Congrats.
Try this, a little softer and more uniform perhaps.

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
6% {left:0px; opacity:1;} /* +1% = 7% */
7% {opacity:0.6;} /* +2% = 9% */
/* slide 2 */
9% {left:-600px; opacity:1;} /* +6% = 15% */
15% {left:-600px; opacity:1;} /* +1% = 16% */
16% {opacity:0.6;} /* +2% = 18% */
/* slide 3 */
18% {left:-1200px; opacity:1;} /* +6% = 24% */
24% {left:-1200px; opacity:1;} /* +1% = 25% */
25% {opacity:0.6;} /* +2% = 27% etc */
/* slide 4 */
27% {left:-1800px; opacity:1;}
33% {left:-1800px; opacity:1;}
34% {opacity:0.6;}
/* slide 5 */
36% {left:-2400px; opacity:1;}
42% {left:-2400px; opacity:1;}
43% {opacity:0.6;}
/* slide 6 */
45% {left:-3000px; opacity:1;}
51% {left:-3000px; opacity:1;}
52% {opacity:0.6;}
/* slide 7 */
54% {left:-3600px; opacity:1;}
60% {left:-3600px; opacity:1;}
61% {opacity:0.6;}
/* slide 8 */
63% {left:-4200px; opacity:1;}
69% {left:-4200px; opacity:1;}
70% {opacity:0.6;}
/* slide 9 */
72% {left:-4800px; opacity:1;}
78% {left:-4800px; opacity:1;}
79% {opacity:0.6;}
/* slide 10 */
81% {left:-5400px; opacity:1;}
87% {left:-5400px; opacity:1;}
88% {opacity:0.6;}
/* slide 11 */
90% {left:-6000px; opacity:1;}
98% {opacity:0.6;}
99% {left:-6000px; opacity:0;}
100% {left:0px; opacity:0;}
}

Answer 6

You're welcome. It will work with 15+ slides too. You can divide the 100% by 15 or any other number.

Answer 7

Probably only with a more complicated script, but it's harder to solve. It may not be worth it.

Answer 8

I think with adding or removing <div class="slider-container"> you cannot solve this problem. Independent of the HTML section you should be rewritten and complemented the keyframes part with a script and must calculate the percentage of keyframes depending on the number of slides. Not so easy.

Answer 9

then you need to add interest and more values?

Answer 10

Can I somehow do it through the function? the more slides, the values themselves would increase

Answer 11

And on the other animation can be done?
so not so hard.

Answer 12

Thank! I will be very grateful

Answer 13

Thank you very much

Answer 14

Question. If it will be more than 15 slides ... then how to be

Answer 15

maybe there is another solution?

Answer 16

I meant if automating when adding slides was automatically added

Answer 17

To not constantly rule with your hands css

Answer 18

must be done so that when adding or removing <div class="slider-container"> % changed and shift values

Answer 19

I can’t think how to do it through the script