我无法更改HTML代码本身的结构，因为它是用PHP形成的，所以我不能使用类似滑动条的东西。唯一的出路是通过JavaScript或jq来实现。我自己还不太擅长编写代码，但如果你有代码示例，我可以使用
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
}<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>方式1
垂直滑动图像的简单方法是将height设置为<ol>并制作ovelflow-y: scroll。这将允许您垂直滚动到下一个图像。
方式2
由于您的代码包含Prev和Next链接，为了使用这些链接垂直上下图像，需要javaScript，但它很简单。通过收听按钮的点击事件，我们可以通过在图像上设置属性transform: translateY({num}%)(技术上是包含图像的li元素(来设置图像的垂直对齐。
以下是您询问的示例代码：
const imgSlides = document.querySelectorAll(".pic");
const nextBtn = document.querySelector(".next");
const prevBtn = document.querySelector(".prev");
let counter = 0;
nextBtn.addEventListener('click', function(){
counter++;
carouse();
})
prevBtn.addEventListener('click', function(){
counter--;
carouse();
})
function carouse(){
if(counter < imgSlides.length -1){
nextBtn.disabled = false;
}
else{
nextBtn.disabled = true; //Disabling the next button if the current image is the last image
}
if(counter > 0){
prevBtn.disabled = false;
}
else{
prevBtn.disabled = true; //Disabling the prev button if the current image is the first image
}
//Changing the images vertical positon based on the counter value
imgSlides.forEach(function(slide){
slide.style.transform = `translateY(-${counter*100}%)`
})
}
prevBtn.disabled = true;body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
ol{
list-style: none;
width: 200px;
height: 200px;
padding: 0;
display: flex;
flex-direction: column;
border: 2px solid black;
overflow: hidden;
position: relative;
}
ol li{
position: absolute;
width: 100%;
height: 100%;
}
.pic{
height: 100%;
object-fit: cover;
transition: all 0.25s ease-in-out;
}
/*The below code will put the images vertically one below the other*/
ol li:nth-child(2){
transform: translateY(100%);
}
ol li:nth-child(3){
transform: translateY(200%);
}
ol li:nth-child(4){
transform: translateY(300%);
}
.buttons{
display: flex;
gap: 1rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical Image Slide</title>
</head>
<body>
<ol>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
</ol>
<div class="buttons">
<button class="btn prev">Prev</button>
<button class="next">Next</button>
</div>
</body>
</html>