SplideJS全宽图像滑块不自动播放
SplideJS全宽图像滑块不自动播放
提问于 2021-04-07 23:39:13
我使用Splide作为页面上的全宽滑块，页面上的图像是从我的数据库循环中获取的：
<div class="splide b-bottom-accent is-hidden-mobile">
<div class="splide__track">
<ul class="splide__list">
@foreach($slider_images as $image)
<div class="splide__slide"><img src="{{ asset('storage/'.$image->path) }}"></div>
@endforeach
</ul>
</div>
</div>我的javascript触发滑块：
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
} ).mount();cover选项使图像成为div的背景并可以被覆盖，perPage，gap和padding选项在那里使淡入淡出工作。
文档没有说明如何激活自动播放，我认为它意味着自动激活，相反，它只说明如何添加进度条：
You can add a progress bar or play/pause buttons for autoplay by writing a few extra lines of HTML.我是不是遗漏了什么？一切正常，滑块显示，图像显示，当单击箭头时发生淡入淡出，我在控制台中没有错误。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2021-09-29 12:59:04
您只需要添加autoplay: true，并且间隔也是可配置的(ms)。我发现将字体设置为淡入淡出时，最好也将倒带设置为true。
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
autoplay: true,
interval: 4000
} ).mount();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66989452
复制相关文章
相似问题
腾讯云开发者
