Как сделать простой вертикальный слайдер, на чистом 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
}
