如何在 JavaScript 中制作一个垂直的 slider？
[英]How do I make a vertical slider in JavaScript?
问题描述
我无法更改 HTML 代码本身的结构，因为它是由 PHP 组成的，所以我不能使用 swiper slider 之类的东西。唯一的出路是通过 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 个解决方案
解决方案1
0 2022-10-03 12:18:14
方式一
垂直滑动图像的简单方法是为<ol>设置height并设置ovelflow-y: scroll 。 这将使您垂直滚动到下一个图像。
方式二
由于您的代码包含Prev和Next链接，为了使用这些链接来垂直上一个和下一个图像，需要javaScript ，但很简单。 通过监听按钮的点击事件，我们可以通过设置图像的属性transform: translateY({num}%)来设置图像的垂直方向 alignment（技术上是包含图像的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>
如何使用javascript（仅）对图像滑块进行简单的淡入淡出效果？
[英]How do I make a simple fade effect on an image slider with javascript(only)?
具有Javascript的Slider，从最后一个元素开始，如何使其以正常顺序开始？
[英]Slider with Javascript, starts with the last element, how do I make it start with normal order?
如何使用Jquery / JavaScript使此图像滑块在单击时滑动一次以上？
[英]How do I make this image slider to slide more than once when clicked, using Jquery/JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.