我最近从link选择了超级滑块
然后在我的网站上配置它,它绝对有效。但我有一个问题。 :(我无法启动此滑块的自动播放。由于上述链接的文档,我可以使用一些选项来开始自动播放,但我不知道怎么做,没有自动播放演示告诉我怎么样?
这是我的代码:
<section id="slider">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="slider_area">
<!-- Start super slider -->
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/slider/2.jpg" alt="img">
<div class="slider_caption">
<h2>Title</h2>
<p>Description</p>
<a class="slider_btn" href="#">More</a>
</div>
</li>
<!-- Start single slider-->
<li>
<img src="img/slider/3.jpg" alt="img">
<div class="slider_caption slider_right_caption">
<h2>Title</h2>
<p>Description</p>
<a class="slider_btn" href="#">More</a>
</div>
</li>
<!-- Start single slider-->
<li>
<img src="img/slider/4.jpg" alt="img">
<div class="slider_caption">
<h2>Title</h2>
<p>Description</p>
<a class="slider_btn" href="#">More</a>
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next"></a>
<a href="#" class="prev"></a>
</nav>
</div>
</div>
</div>
</div>
</section>
现在如何使用此选项自动播放滑块
$('#slides').superslides(options_hash)
delay: 5000
play: true
slide_speed: 'normal'
slide_easing: 'linear'
nav_class: 'slides-navigation'
container_class: 'slides-container'
pagination: true
hashchange: true
感谢您的帮助:))
答案 0 :(得分:4)
使用play: 1000
在自动加载幻灯片之间延迟1000毫秒。使用false
禁用,但要启用一个数字。
以下是自动播放幻灯片并在悬停时停止自动播放的示例:
$(function() {
$('#slides').superslides({
hashchange: true,
play: 2000
});
$('#slides').on('mouseenter', function() {
$(this).superslides('stop');
console.log('Stopped')
});
$('#slides').on('mouseleave', function() {
$(this).superslides('start');
console.log('Started')
});
});
没有悬停效果:
$(function() {
$('#slides').superslides({
hashchange: true,
play: 2000
});
});
答案 1 :(得分:1)
看起来这里有更多文档:https://github.com/nicinabox/superslides
也许在加载时调用$('#slides').superslides('start')