CSS slider

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

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

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

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

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;} }

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

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

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.

then you need to add interest and more values?

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

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

Thank! I will be very grateful

Thank you very much

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

maybe there is another solution?

I meant if automating when adding slides was automatically added

To not constantly rule with your hands css

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

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