Как сделать вертикальный слайдер на js?

Question

[hooli-gun]

Как сделать простой вертикальный слайдер, на чистом js? Может есть примеры пожожие.

<div class="woocommerce-product-gallery">
  <ol class="flex-control-nav flex-control-thumbs">
    <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" class="flex-active"></li>
    <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg"></li>
    <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg"></li>
    <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg"></li>
  </ol>

  <ul class="flex-direction-nav">
    <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
  </ul>
</div>

ol, ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
img {
  width: 100px;
  height: 150px;
  object-fit: cover;
}
.flex-control-nav {
  position: relative;
  height: 300px;
  width: 100px;
  border: 2px solid #000;
  margin: 10px 0;
  overflow: hidden
}

Comments

[Ankhena]

Может есть примеры пожожие.

https://swiperjs.com/demos#vertical

А вообще, также как горизонтальный, только направление сдвигов и анимации не по горизонтали, а по вертикали.

[hooli-gun]

Ankhena, Я не могу менять саму структуру html

[Ankhena]

hooli-gun, не меняйте.
Нагуглите любой простецкий горизонтальный слайдер (просто потому что их больше), посмотрите как сделано и измените направление.