Проблемы с моим CSS, из-за которого мои изображения располагаются друг под другом? ⇐ CSS

[Anonymous]

Мне хотелось бы, чтобы 10 изображений отображались в виде автоматического слайдера с подписью. Теперь происходит то, что слайдер показывает только 4 изображения, а затем сбрасывается. Я хотел бы, чтобы это была бесконечная прокрутка, и я также загрузил 10 изображений, которые, по сути, теперь заставляют весь слайдер изображений создавать еще один слайдер из 4 изображений под ним. Как я могу это решить? Если вы можете сделать для меня слайдер изображений с таким же эффектом (даже если он со стрелками) и способный бесконечно анимировать независимо от количества изображений, я буду очень признателен!
CSS

Код: Выделить всё

div.slider-wrap {
width: 100%;
height: 100%;
float: left
}

div#slider {
width: 80%;
max-width: 640px;
}

div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
}

div#slider .jerslides {
width: 25%;
height: auto;
float:left
}

div#slider {
width: 100%;
max-width: 600px;
overflow: hidden;
margin: 26px auto 0;
}

@keyframes slidy {
0% {
left: 0%;
}
29% {
left: 0%;
}
33% {
left: -100%;
}
62% {
left: -100%;
}
67% {
left: -200%;
}
96% {
left: -200%;
}
100% {
left: -300%;
}
}

div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 16s slidy infinite;
}

div#slider:hover .jt_slides {
/*transition: opacity .5s;*/
opacity: 0.9;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}

.jerslides img {
margin-bottom: 20px;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

HTML-5

Код: Выделить всё

[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Aspirational regret, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas8.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Aber kaputt ist alles nicht, 2024 ballpen, rabbitskinglue, pigments, shellac and oil on canvas diptych  98 3/8 x 157 1/2 in



[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Content, 2024, ballpen, rabbitskinglue, pigments on paper.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Content, 2024, ballpen, rabbitskinglue, pigments on paper



[url=#]
[img]Assets/Artworks/16.  TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, daddy wants his money back, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas4.jpg[/img]
[/url]

★★★★★
Christoph Matthes, daddy wants his money back, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas



[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Fortunate Son, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas9.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Fortunate Son, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas



[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Nicht dabe sein ist alles, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Nicht dabe sein ist alles, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas



[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Not many but more than one, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas5.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Not many but more than one, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas



[url=#]
[img]Assets/Artworks/16. TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Pride and Prejudice, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas10.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Pride and Prejudice, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas



[url=#]
[img]Assets/Artworks/16.  TACTICAL HUGS PRACTICAL SHRUGS_ CHRISTOPH MATTHES  12 SEPTEMBER - 26 OCTOBER 2024 2/WORKS/Christoph Matthes, Sandbox Cut-throats, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas6.jpg[/img]
[/url]

★★★★★
Christoph Matthes, Sandbox Cut-throats, 2024, ballpen, rabbitskinglue, pigments, acrylic and oil on canvas

Я пытался сделать это, чтобы анимировать как минимум 10 изображений.

Код: Выделить всё

/* Parent wrapper */
div.slider-wrap {
width: 100%;
height: 100%;
clear: both; /* Ensure clearing any floats */
}

/* Slider container */
div#slider {
width: 100%;
max-width: 600px;
overflow: hidden;
margin: 26px auto 0;
overflow-x: hidden; /* Ensure horizontal overflow is hidden */
position: relative;
}

/* All slides container (holds all the individual slides) */
div#slider .jt_slides {
position: relative;
width: 1000%; /* 100% * number of slides (10 slides = 1000%) */
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 20s slidy infinite; /* Adjusted animation time (20 seconds) */
}

/* Individual slide styles */
.jerslides {
width: 10%; /* Each slide takes up 10% of the total width */
height: auto;
float: left;
}

/* Image styling */
.jerslides img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure images are scaled correctly */
display: block;
}

/* Animation for sliding */
@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }
20% { left: -10%; }
30% { left: -10%; }
40% { left: -20%; }
50% { left: -20%; }
60% { left: -30%; }
70% { left: -30%; }
80% { left: -40%; }
90% { left: -40%; }
100% { left: -50%; }
}

Но это не сработало, поскольку теперь время слайдера слишком медленное и отображается только для изображений. Мне бы очень хотелось получить совершенно новый слайдер с теми функциями, о которых я просил, если бы кто-нибудь мог мне помочь.

Подробнее здесь: https://stackoverflow.com/questions/791 ... each-other