Flex Slider - 如何为两个滑块添加相同的控件

Question

我正在为一个项目使用Flex slide r。我需要在一个页面上使用相同的控件控制两个滑块。

一部分是显示图像的主滑块，第二部分是文本（在这种情况下，它将取自WP中的“the_excerpt”）。

基本上，这是我用来在一个页面上调用两张幻灯片的代码：

  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });

    $('#secondary-slider').flexslider();
  });

现在，我需要将它们“连接”到相同的控件，所以当我点击箭头时，它会滑动/淡化它们。

Answer 1

您可以通过放弃controlsContainer设置并创建自己的导航来完成您要尝试的操作，然后链接到两个滑块。这里有一个关于如何（请注意它未经测试）的想法

您的标记看起来像这样。注意链接上的rel属性 - 我们将在下面使用它们。另请注意，值从0开始 - 这与幻灯片的值匹配（例如，第一张幻灯片为0，第二张为1等）。

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>
<a rel="3" class="slide_thumb" href="#">slide link 3</a>

<div id="main-slider" class="flexslider">
<ul class="slides">
    <li>
        <img src="image1.jpg" />
    </li>
    <li>
        <img src="image2.jpg" />
    </li>
    <li>
        <img src="image3.jpg" />
    </li>
    <li>
        <img src="image4.jpg" />
    </li>
</ul>
</div>

<div id="secondary-slider" class="flexslider">
<ul class="slides">
    <li>
        <p>Text 1</p>
    </li>
    <li>
        <p>Text 2</p>
    </li>
    <li>
        <p>Text 3</p>
    </li>
    <li>
        <p>Text 4</p>
    </li>
</ul>

然后设置对flexslider的调用

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

$('#main-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
        $('a.slide_thumb').click(function() {
            $('.flexslider').show();
            var slideTo = $(this).attr("rel")//Grab rel value from link;
            var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
            if (slider.currentSlide != slideToInt) {
                slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
            }
        });
    }

});

$('#secondary-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
        $('a.slide_thumb').click(function() {
            $('.flexslider').show();
            var slideTo = $(this).attr("rel")//Grab rel value from link;
            var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
            if (slider.currentSlide != slideToInt) {
                slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
            }
        });
    }

});

});
</script>

基本上两个滑块都由同一组导航链接控制。认为这应该让你朝着正确的方向前进，但如果你需要任何解释的话就会喊叫。

Answer 2

对于Flexslider 2，您可以使用sync: "selector"选项。只需设置其中一个滑块“controlNav: false。

即可

$(window).load(function() {
    $('#main-slider').flexslider({
        animation: 'slide',
        controlNav: true,
        sync: '#secondary-slider'
    });

    $('#secondary-slider').flexslider({
        controlNav: false
    });
});

Answer 3

所以，我一直有同样的问题，这可能是一个真正的拖累...但我已经找到了一个简单易行的快速解决方案。这适用于父母flexslider控制的1个孩子或100个孩子。适用于所有行动。希望我可以和他们讨论修复这个并允许一系列jquery对象用于同步方法。

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
  </ul>
</div>

<div class="flexslider_children">
  <ul class="slides">
    <li><p>Text 1</p></li>
    <li><p>Text 2</p></li>
    <li><p>Text 3</p></li>
    <li><p>Text 4</p></li>
  </ul>
</div>

<div class="flexslider_children">
  <ul class="slides">
    <li><p>Text 1</p></li>
    <li><p>Text 2</p></li>
    <li><p>Text 3</p></li>
    <li><p>Text 4</p></li>
  </ul>
</div>

然后为你的javascript运行它。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
  'slideshow': false, // Remove the animations
  'controlNav' : false // Remove the controls
}); 

/** 
* Set up the main flexslider
*/
$('.flexslider').flexslider({
  'pauseOnHover' : true,
  'animationSpeed': 2000,
  'slideshowSpeed': 5000,
  'initDelay': 3000,
  // Call the update_children_slides which itterates through all children slides 
  'before' : function(slider){ // Hijack the flexslider
    update_children_slides(slider.animatingTo);
  }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
  // Iterate through the children slides but not past the max
  for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
  }   
}

希望这有帮助!!请注意我添加了这个原因它非常类似于我想要做的事情，似乎我不是唯一一个想在flexslider中使用多个同步的人。

Answer 4

我想确认MrBandersnatch的解决方案是否有效。我在下面发布我的代码更改，以显示他的工作的变化。

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
    slideshow: false, // Remove the animations
    controlNav : false, // Remove the controls
    animationSpeed: 1200,
    itemWidth: 175,
    itemMargin: 20,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize()
}); 


/** 
* Set up the main flexslider
*/
$('#flexslider_index_band_1').flexslider({
    pauseOnHover : true,
    animationSpeed: 1200,
    slideshow: false,
    initDelay: 3000,
    directionNav: true,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    controlsContainer: '.paginated_nav',
    directionNav: true,
    prevText: '',
    nextText: '',
    itemWidth: 175,
    itemMargin: 20,
    sync: '#flexslider_index_band_2',
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider
        update_children_slides(slider.animatingTo);
    }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
    // Iterate through the children slides but not past the max
    for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
    }   
}

}）;

Answer 5

我找到的一个解决方案是创建自己的自定义横幅导航。根据自己的喜好定位并定型。唯一重要的是有一种方法来定位它。在此示例中，我使用了 slider-next 和 slider-prev 的ID。

<ul>
  <li><a id="slider-next" href="#">Next</a></li>
  <li><a id="slider-prev" href="#">Prev</a></li>
</ul>

现在，创建两个flexer滑块并根据您的css想要定位它们。我将标题我的主横幅.flexslider和我的标题.captions。

<div class="flexslider">
  <ul class="slides">
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li>
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li>
  </ul>
</div>
<!-- Some other place in the code -->
<div class="captions">
  <ul id="info" class="slides">
    <li>
      <h2>Example Banner 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
  </ul>
</div>

现在让简单的魔法让它发挥作用。激活javascript文件中的两张幻灯片，并在CSS中隐藏横幅和标题的导航控件。这样，您的自定义导航将是唯一可见的控件。然后，只需创建一个功能，在点击时触发滑块和标题的控制导航。示例如下。 .trigger jQuery函数就是这里的魔法。在此处查看其文档：http://api.jquery.com/trigger/

//Load slider after .ready()
$(window).load(function(){

    //Activate Both Banner and Caption slides
    $('.flexslider').flexslider({
        controlNav: false,
    });

    $('.captions').flexslider({
        controlNav: false,
    });

    //Sink Control Navs
    $('#slider-next').click(function(){
        $('.flexslider .flex-next').trigger('click');
        $('.captions .flex-next').trigger('click');
    });

    $('#slider-prev').click(function(){
        $('.flexslider .flex-prev').trigger('click');
        $('.captions .flex-prev').trigger('click');
    })
});