CSS slider
I can not understand why it shows only 4 slides. https://code.sololearn.com/W87B0MsxWw4p/#html Tell me where and what is wrong?
7/22/2019 6:33:26 AM
Alexander Borichevsky
19 Answers
New AnswerYou need more target hooks. CSS after line 84 these show the slides 0, -600, -1200, -1800, -2400, -3000 etc.
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.
Can I somehow do it through the function? the more slides, the values themselves would increase
must be done so that when adding or removing <div class="slider-container"> % changed and shift values