@hooli-gun

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

Как сделать простой вертикальный слайдер, на чистом 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
}
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы