+- R-Board (https://reelboard.eu)
+-- Forum: Hobby (https://reelboard.eu/forumdisplay.php?fid=14)
+--- Forum: Coding (https://reelboard.eu/forumdisplay.php?fid=26)
+--- Thread: Simple slideshow (/showthread.php?tid=760)
Simple slideshow - board - 03-18-2026
Vertical slideshow
HTML
PHP Code:
<div class="vslider">
<div class="vslides">
<a href="https://example1.com">
<img src="image1.jpg" alt="Banner 1">
</a>
<a href="https://example2.com">
<img src="image2.jpg" alt="Banner 2">
</a>
<a href="https://example3.com">
<img src="image3.jpg" alt="Banner 3">
</a>
<a href="https://example4.com">
<img src="image4.jpg" alt="Banner 4">
</a>
<a href="https://example5.com">
<img src="image5.jpg" alt="Banner 5">
</a>
<a href="https://example6.com">
<img src="image6.jpg" alt="Banner 6">
</a>
<a href="https://example7.com">
<img src="image7.jpg" alt="Banner 7">
</a>
<a href="https://example8.com">
<img src="image8.jpg" alt="Banner 8">
</a>
</div>
</div>
CSS
PHP Code:
.vslider {
width: 100%; /* запълва ширината на контейнера */
max-width: 300px; /* максимум на десктоп */
height: 0;
padding-top: 83.33%; /* височина 250px спрямо max-width (250/300*100) */
overflow: hidden;
margin: auto;
position: relative;
}
.vslides {
display: block;
animation: vslide 32s infinite;
animation-timing-function: ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.vslider:hover .vslides {
animation-play-state: paused;
}
.vslides a {
display: block;
width: 100%;
}
.vslides img {
width: 100%;
height: auto; /* височината се адаптира автоматично */
display: block;
object-fit: cover;
}
/* Анимация за 8 банера */
@keyframes vslide {
0% { transform: translateY(0); }
11% { transform: translateY(0); }
12.5% { transform: translateY(-100%); }
23.5% { transform: translateY(-100%); }
25% { transform: translateY(-200%); }
36% { transform: translateY(-200%); }
37.5% { transform: translateY(-300%); }
48.5% { transform: translateY(-300%); }
50% { transform: translateY(-400%); }
61% { transform: translateY(-400%); }
62.5% { transform: translateY(-500%); }
73.5% { transform: translateY(-500%); }
75% { transform: translateY(-600%); }
86% { transform: translateY(-600%); }
87.5% { transform: translateY(-700%); }
98.5% { transform: translateY(-700%); }
100% { transform: translateY(0); }
}