Simple slideshow

***board*** · ***board*** 03-18-2026, 08:01 AM Administrator

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

Simple slideshow

board