我想知道Swiper JS中是否有一个选项可以设置单独的幻灯片持续时间/延迟。我在文档、github issues 中搜索，但找不到任何相关内容。
如果无法开箱即用，任何人都可以展示如何通过破解核心或自定义代码来实现这一目标。
谢谢。
data-swiper-autoplay属性：
https://swiperjs.com/swiper-api#param-autoplay
转换之间的延迟（以毫秒为单位）。如果不指定该参数，将禁用自动播放
如果您需要为特定幻灯片指定不同的延迟，可以通过使用幻灯片上的 data-swiper-autoplay （以毫秒为单位）属性来实现：
<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">
例子：
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7.0.1/swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<h1>Swiper 7 data-swiper-autoplay</h1>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="3000">3 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="4000">4 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="5000">5 seconds</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@7.0.1/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper', {
initialSlide: 1,
slidesPerView: 1,
spaceBetween: 20,
autoplay: {
delay: 2000,
},
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>| 归档时间： |
|
| 查看次数： |
16533 次 |
| 最近记录： |