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 使用对您的其他div进行操作的onSlideNext或onSlidAfter定义一些操作我不知道你如何获得你的内容，AJAX load()？
或直接从代码？无论如何，这是我认为最好的方法。

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

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

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

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

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

Answer 2

这是一个不同的插件，但我认为它是最好的和最灵活的，它是循环2，这里是我刚刚制作的jsfiddle的链接：http://jsfiddle.net/cp6mN/，重要的部分是{{1滑块div的{}}和data-cycle-next属性，并创建具有元素的按钮，并在那里声明。

两个带一个导航的滑块

2 个答案: