如何解决如何实现轮播自动播放
我是Web开发人员的新手,很抱歉,如果我的英语不好。 我正在尝试在此部分自动实现工具提示的Slick自动播放。我已经实现了完美工作的箭头,但是除此之外,我还需要自动播放。有人可以给我一些如何自动播放轮播的想法吗?
[HTML]
<section class="section showcase" id="section2">
<div class="second-background"></div>
<div class="map" id="pin-container">
<div class="slider">
<i class="fas fa-chevron-left slide-left"></i>
<i class="fas fa-chevron-right slide-right"></i>
</div>
</div>
</section>
[JS]
function initServicesSlider() {
var width = $(window).width();
if (width <= 992) {
$('.service-slider').slick({
mobileFirst: true,touchThreshold: 10,});
$('.services div .slide-right').click(function () {
$('.service-slider').slick('slickNext');
});
$('.services div .slide-left').click(function () {
$('.service-slider').slick('slickPrev');
});
}
必须与以下内容有关:
$(.'service-slider').slick({
autoplay: true,autoplaySpeed: 3000,})
但我不知道如何实现。
PS:我确实导入了光滑轮播
感谢帮助!:)
https://i.stack.imgur.com/Wfjp3.png
解决方法
这里有几件事:
- 您需要关闭
if
语句
if (width <= 992) {
$('.service-slider').slick({
mobileFirst: true,touchThreshold: 10,});
$('.services div .slide-right').click(function () {
$('.service-slider').slick('slickNext');
});
$('.services div .slide-left').click(function () {
$('.service-slider').slick('slickPrev');
});
}
-
$(.'service-slider')
应该为$('.service-slider').slick...
(将句点移到字符串中)。 -
您正在调用的类在上面的HTML中不存在。您只需要致电
$('.slider').slick...
。
除了@nihiser建议的标记修复#1和#2之外,您还应在一次调用中合并所有Slick初始化代码:
$('.service-slider').slick({
mobileFirst: true,autoplay: true,autoplaySpeed: 3000,});
这是假设您要在幻灯片中添加如下所示的标记:
<div class="slider">
<div class="service-slider">
<div>Slide 1 Contents</div>
<div>Slide 2 Contents</div>
<div>Slide 3 Contents</div>
...
</div>
<i class="fas fa-chevron-left slide-left"></i>
<i class="fas fa-chevron-right slide-right"></i>
</div>
您不想在包含幻灯片的<div>
中包含箭头,否则Slick会将其视为其他幻灯片。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。