一个导航的两个滑块

Question

在我的新项目中，我需要两个滑块（或一个与选项卡相连的滑块）。

这里是例子 http://oi39.tinypic.com/2yyxxlx.jpg

当我点击 NEXT 或 PREV（顶部滑块的）内容（在滑块下方的红色框中）必须更改为另一个内容。

我需要通过一个导航在两个红色框之间建立连接。它必须是同步的。

你能帮帮我吗？

我用BXSLIDER

这里是代码

<div class="slider1">
    <div class="slide">
        <img src="images/slider/1.jpg" />
        <div class="over-text">
            <h2>ZAŽI RAKETOVÝ ŠTART</h2>
            <a href="">link</a>
        </div>
    </div>
    <div class="slide">
        <img src="images/slider/2.jpg" />
        <div class="over-text">
            <h2>ZAŽI RAKETOVÝ ŠTART</h2>
            <a href="">link</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
     $('.slider1').bxSlider({
         slideWidth: 1200,
         minSlides: 1,
         maxSlides: 1,
         slideMargin: 0,
         pause: 8000,
         speed: 500,
         controls: true,
         auto: true,
         autoStart: false
     });
 });   
</script>

（对不起，我的英语很差）

Answer 1

如果我理解正确，那么您可以使用plugin's methods。
使用 onSlideNext 或 onSlidAfter 定义一些对您的其他 div 进行操作的操作。
我不知道您如何获得您的内容，AJAX load()?
还是直接从代码？无论如何，这是我认为最好的方法。

所以我的想法是这样的，但我让你微调它。
首先定义你的滑块，使它们属于一个变量，你可以轻松地调用它们的方法：

mySlide1 = $('.slider1').bxSlider({ 
    //code code code
}
mySlide2 = $('.slider2').bxSlider({
    //code code code
}

然后将此行添加到slider1中的选项中：

onSlideAfter: function() { mySlide2.goToNexSlide()};

这样，当您单击第一个滑块时，第二个滑块将改变幻灯片。
或者，您可以在回调中设置任何代码以获得所需的结果。

Answer 2

这是一个不同的插件，但我真的认为它是最好和最灵活的，它是 Cycle 2，这是我刚刚制作的 jsfiddle 的链接：http://jsfiddle.net/cp6mN/，重要的部分是 data-cycle-next 和 @ 987654324@ 滑块 div 的属性并使用您在此处声明的元素创建按钮。