Question

我尝试在#slider初始化后添加 sync 选项，但它不起作用。 animationSpeed 等其他选项可以正常使用。

jQuery( function( $ ) {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
 
 	// Assume that it's defined in a 3rd-party plugin
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
  });
  
  // Now I want to customize the options after init.
  var slider = $('#slider').data('flexslider');
  slider.vars.sync = '#carousel';
   slider.vars.animationSpeed = 5000;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/woocommerce/FlexSlider/master/jquery.flexslider-min.js"></script>
<link href="https://rawgit.com/woocommerce/FlexSlider/master/flexslider.css" rel="stylesheet"/>

<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <li>
      <img src="https://placehold.it/300x300" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

预期结果：如果同步选项设置正确，则第一个滑块与carousel同步，这在上面的示例中显然不起作用。

将同步选项添加到已初始化的FlexSlider

0 个答案: