在调用停止方法时，Swiper有一些延迟。
在调用停止方法时，Swiper有一些延迟。
提问于 2022-06-30 17:05:55
我使用的是SwiperJS框架。我正在做一个项目，我需要暂停滑块从动画，当项目是悬停。我的工作代码阻止了它的动画，但在它停止之前，它有一些延迟。怎样才能防止延误呢？
$mySwiper = $(".swiper-container");
new Swiper($mySwiper[0], {
spaceBetween: 0,
centeredSlides: true,
direction: "vertical",
speed: 4000,
autoplay: {
delay: 1,
},
cssEase: "linear",
loop: true,
slidesPerView: "auto",
allowTouchMove: false,
});
$mySwiper.hover(
function () {
$mySwiper.css("background", "yellow");
this.swiper.autoplay.stop();
},
function () {
$mySwiper.css("background", "none");
this.swiper.autoplay.start();
}
);.swiper-container {
width: 100%;
max-width: 940px;
height: 500px;
margin: 0 auto;
}
.swiper-container .swiper-slide {
border-bottom: #ccc solid 1px;
height: auto;
}
.swiper-container .swiper-slide {
text-align: center;
/* 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;
-webkit-align-items: center;
align-items: center;
}
.swiper-container img {
max-height: 200px;
}
.swiper-container .swiper-wrapper {
transition-timing-function: linear;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=5" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=6" alt=""></div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2022-07-01 02:07:01
这可能有点让人困惑。
API swiper.autoplay.stop()更改自动播放模式=> (而不是“冻结/停止”“当前”滑块transform位置)。
将设置为非常慢的AutoPlay ，以查看此想法的执行情况：
const swiper = new Swiper('.swiper', {
spaceBetween: 0,
centeredSlides: true,
//direction: "vertical",
speed: 7000,
autoplay: {
delay: 10,
pauseOnMouseEnter: true,
},
loop: true,
slidesPerView: "auto",
});
swiper.on('autoplay', function () {
$("#status").text("autoplay")
});
swiper.on('autoplayStop', function () {
$("#status").text("Wait until autoplayStop");
$("#status").css("color", "red");
});#status{
color: green;
}
.swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-container img {
max-height: 200px;
}<!-- swiper 8 -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<h4 id="status"></h4>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=5" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=6" alt=""></div>
</div>
</div>
求和： Hover >“此”幻灯片结束的转换>自动播放禁用。
不管好坏，这是API。https://swiperjs.com/swiper-api#autoplay
旧的相关github问题：https://github.com/nolimits4web/Swiper/issues/1798
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72819589
复制相关文章
相似问题
腾讯云开发者
