主页 / 问题 / 597526
Accepted
Artem
Asked:2020-11-30 09:03:02 +0000 UTC2020-11-30 09:03:02 +0000 UTC

如何在 Flexlider 中为单个幻灯片设置不同的暂停？

  • 772

我使用Flexslider插件来创建幻灯片。对于标准行为，所有幻灯片的暂停都是相同的，由参数设置slideshowSpeed。对这个问题感兴趣，如何确保每张幻灯片都有自己的暂停时间？我没有在文档中找到这个问题的答案。

javascript

1 个回答

  1. Best Answer

    $(function() {

  $hook = $('.flexslider');
  $hook.flexslider({
    animation: $hook.data('animation'),
    controlNav: $hook.data('control-nav'),
    slideshow: $hook.data('slideshow'),
    startAt: $hook.data('start-at'),
    pauseOnHover: false,
    after: function(slider) {
      slider.stop();
      slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
      slider.play();
    }
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider-min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>

<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0">
  <ul class="slides">
    <li data-duration="100">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" alt="Alt" />
    </li>
    <li data-duration="2000">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" alt="Alt Text" />
    </li>
    <li data-duration="100">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" alt="Alt Text" />
    </li>
  </ul>
</div>

    • 0

相关问题