gpt4 book ai didi

javascript - 按 View 滑动危险 slider 而不是一个一个

转载 作者:行者123 更新时间:2023-12-01 16:09:20 25 4
gpt4 key购买 nike

我正在使用 Swiper Idangerous 插件创建 slider ,但遇到了问题。

我将解释我的问题:Swiper 现在在分页时显示所有项目的项目符号,并且在滑动时滑动到下一个项目。

我需要:需要分页仅显示页数(而不是项目)并且滑动时需要查看接下来的 4 个项目(因此滑动所有 4 个项目并显示接下来的 4 个项目)。

如果那个插件可以做到这一点?或者其他可以做到这一点?

我添加了一个代码,这样您就可以知道我在做什么,因为我也需要它来响应。

var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
loopedSlides: 4,
centeredSlides: false,
spaceBetween: 10,
grabCursor: true,
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true,
breakpoints: {
1200: {
slidesPerView: 4,
loopedSlides: 4,
spaceBetween: 10
},
1024: {
slidesPerView: 3,
loopedSlides: 3,
spaceBetween: 10
},
768: {
slidesPerView: 2,
loopedSlides: 2,
spaceBetween: 10
},
675: {
slidesPerView: 1,
loopedSlides: 1,
spaceBetween: 20
}
}
});
.swiper-container {
width: 100%;
height: 300px;
}

.swiper-slide {
color: #000;
text-align: center;
padding: 100px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<!-- Slider main container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>

最佳答案

尝试设置选项

slidesPerGroup: 4

关于javascript - 按 View 滑动危险 slider 而不是一个一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38998417/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com