Flex滑块-如何为两个滑块添加相同的控件 [英] Flex Slider - How to add same controls for two sliders

问题描述

我正在将 Flex幻灯片 r用于一个项目.我需要使用相同的控件来控制一页上的两个滑块.

I am using Flex slider for one project. I need to control two sliders on one page with same controls.

一个部分是将显示图像的主滑块，第二个部分是文本(在这种情况下，它将取自WP中的"the_excerpt").

One part is main slider that will show images, and the second one is text (in this case it will be taken from "the_excerpt" in WP ).

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

Basically, this is the code I am using to call two slides on one page:

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

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

现在，我需要将它们连接"到相同的控件，因此，当我单击箭头时，它将滑动/淡化它们两个.

Now, I need to "connect" both of them to same controls, so when I click on arrow, it will slide/fade both of them.

推荐答案

您可以通过放弃controlsContainer设置并创建自己的导航，然后链接到两个滑块来完成您要尝试的操作.这是一个想法(请注意，未经测试)

You could accomplish what you're trying to do by ditching the controlsContainer setting and creating your own navigation that you then link to both sliders. Here's an idea of how (please note it's untested)

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

Your markup would look something like this. Note the rel attribute on the links - we'll use them below. Also note that the values start from 0 - this matches the values for the slides (e.g. the first slide is 0, the second is 1 etc).

<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的调用

Then you set up the call to 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>

基本上，两个滑块都由同一组导航链接控制.认为这应该使您朝正确的方向前进，但是如果您需要任何解释，请大喊大叫.

Basically both sliders are controlled by the same set of navigation links. Think this should get you moving in the right direction but shout if you need anything explained.

这篇关于Flex滑块-如何为两个滑块添加相同的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！