如何自动播放超级滑块?

时间:2016-01-07 17:03:21

标签: javascript jquery

我最近从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

感谢您的帮助:))

2 个答案:

答案 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')

相关问题