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
    });
});