两个滑块与一个导航

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

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

当我点击下一步或上一个内容（前滑块）（在滑盖下的红色框）必须改变到另一个内容。

我需要两个红色框之间的连接与一个导航。它必须同步。

你能帮我吗？

我用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>

（对不起，我的英语很糟糕）

来源

2013-12-23 Matrinkoo

如果我理解正确，那么你可以使用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()};

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

来源

2013-12-23 09:01:16

嗨Alan，内容将由（静态）代码加载。（如果可能的话）如果我有fe。 BXSLIDER的四个滑块我在滑块下具有相同数量的DIV。它必须同步。基本上我需要两个滑块，我将使用一个导航进行操作。当我点击NEXT/PREV时，两个滑块同时切换。你能告诉我一些你想法的代码吗？我认为你能正确理解我。 – Matrinkoo

好吧，让我编辑我的答案。 –

这是一个不同的插件，但我真的认为这是最好的和最灵活的在那里，它的周期2，这里是一个链接到的jsfiddle我刚才提出：http://jsfiddle.net/cp6mN/的重要组成部分，也是该data-cycle-next和data-cycle-prev属性滑块div和创建按钮元素哟声明那里。

来源

2013-12-23 09:44:22

这就是我需要的，但它只适用于IMG？导致在第二个幻灯片我需要与内容，而不是IMG的DIV。感谢您的回答。 – Matrinkoo

它可以处理任何与你合作的任何东西，你需要添加'data-cycle-slides'属性并用类似'> div'或者'div'来填充它，你可以在这里看到所有的API选项：http： //jquery.malsup.com/cycle2/api/ –

@Matrinkoo做到了吗？如果有，请将我的答案标记为正确。 –

两个滑块与一个导航

回答

相关问题