我想在我的网页上创建一个垂直滑块。我希望每张幻灯片的高度都是其自己的文本内容的高度。如果我没有设置一定的高度（例如 500 像素），则使用滑动器提供的高度（100%），将创建无限的高度。我只是希望当用户单击每个滑动分页时，每张幻灯片都与文本一样高。我不希望能够用鼠标或触摸来移动幻灯片。使用的版本：Swiper 7.0.1。
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
speed: 600,
allowTouchMove: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});.swiper {
width: 100%;
height: 100%;
}
.swiper {
width: 100%;
/*height: 100%;*/
/* height: 500px; */
/* min-height: 500px; */
max-height: 500px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center; …我必须设计一个像这样的滑块。就像这个unsplash.com或这个piotnetgrid.com。
我无法使用 swiper 解决以下问题：我想使用此滑块中的循环。在这个幻灯片中，我放置了 20 张照片幻灯片。当自动播放到达图19和图20并进入循环重新开始时，这是通过跳跃来完成的。
var swiper = new Swiper(".masonrySwiper", {
direction:"horizontal",
loop: true,
slidesPerView: 8,
simulateTouch:false,
autoplay: {
enabled: true,
delay: 1,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
centerInsufficientSlides:true,
speed: 700,
});.swiper-wrapper{
box-sizing: border-box !important;
display: flex !important;
flex-flow: column wrap !important;
height: 80vh !important;
text-align: center !important;
text-transform: uppercase !important;
width: 100% !important;
left: 0;
transition-timing-function: linear !important;
}
.grids {
align-items: center !important;
background: white !important;
background-size: cover !important;
background-repeat: no-repeat !important; …