Flex滑块 - 如何添加两个滑块的相同控件

Question

我正在使用Flex slide r用于一个项目。我需要使用相同的控件在一页上控制两个滑块。

一个部分是主滑块，将显示的图像，而第二个是文本（在这种情况下，它将从“the_excerpt”在WP采取）。

基本上，这是我使用调用一个页面上有两个幻灯片代码：

$(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控制的1个孩子或100个孩子。适用于所有行为。希望我可以让他们解决这个问题，并允许jquery对象的数组在那里同步方法。

<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 class="flexslider_children"> 
    <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> 
</div> 

<div class="flexslider_children"> 
    <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> 
</div> 

然后为您的JavaScript运行此。

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    'slideshow': false, // Remove the animations 
    'controlNav' : false // Remove the controls 
}); 

/** 
* Set up the main flexslider 
*/ 
$('.flexslider').flexslider({ 
    'pauseOnHover' : true, 
    'animationSpeed': 2000, 
    'slideshowSpeed': 5000, 
    'initDelay': 3000, 
    // Call the update_children_slides which itterates through all children slides 
    'before' : function(slider){ // Hijack the flexslider 
    update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

希望这有助于！请注意我添加了这个原因，它非常类似于我想要做的，看起来像我不是唯一一个在flexslider中使用多个同步的人。

Answer 3

我想确认MrBandersnatch的解决方案是否有效。我在下面发布我的代码更改，以显示他的工作变化。

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    slideshow: false, // Remove the animations 
    controlNav : false, // Remove the controls 
    animationSpeed: 1200, 
    itemWidth: 175, 
    itemMargin: 20, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize() 
}); 


/** 
* Set up the main flexslider 
*/ 
$('#flexslider_index_band_1').flexslider({ 
    pauseOnHover : true, 
    animationSpeed: 1200, 
    slideshow: false, 
    initDelay: 3000, 
    directionNav: true, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    controlsContainer: '.paginated_nav', 
    directionNav: true, 
    prevText: '', 
    nextText: '', 
    itemWidth: 175, 
    itemMargin: 20, 
    sync: '#flexslider_index_band_2', 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize(), // use function to pull in initial value 
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider 
     update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

}）;

Answer 4

对于Flexslider 2，你可以使用sync: "selector"选项。只需设置其中一个滑块“controlNav: false”即可。

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: 'slide', 
     controlNav: true, 
     sync: '#secondary-slider' 
    }); 

    $('#secondary-slider').flexslider({ 
     controlNav: false 
    }); 
}); 

Answer 5

我发现的一个解决方案是创建自己的自定义横幅导航。不管你喜欢什么，都可以定位它的样式。唯一重要的是有办法瞄准它。在这个例子中，我使用了一个ID为slider-next和slider-prev。

<ul> 
    <li><a id="slider-next" href="#">Next</a></li> 
    <li><a id="slider-prev" href="#">Prev</a></li> 
</ul> 

现在，创建两个flexer滑块并将它们放置在您的css中。我将标题为我的主要banner.flexslider和我的标题.captions。

<div class="flexslider"> 
    <ul class="slides"> 
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li> 
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li> 
    </ul> 
</div> 
<!-- Some other place in the code --> 
<div class="captions"> 
    <ul id="info" class="slides"> 
    <li> 
     <h2>Example Banner 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    </ul> 
</div> 

现在为简单的魔法，使其工作。在JavaScript文件中激活这两个幻灯片，并在css中隐藏横幅和标题的导航控件。这样，您的自定义导航将成为唯一可见的控件。然后，创建一个函数来触发滑块和标题的控制导航点击。下面的例子。 .trigger jQuery函数就是这里的魔术。看看它的文档在这里：​​

//Load slider after .ready() 
$(window).load(function(){ 

    //Activate Both Banner and Caption slides 
    $('.flexslider').flexslider({ 
     controlNav: false, 
    }); 

    $('.captions').flexslider({ 
     controlNav: false, 
    }); 

    //Sink Control Navs 
    $('#slider-next').click(function(){ 
     $('.flexslider .flex-next').trigger('click'); 
     $('.captions .flex-next').trigger('click'); 
    }); 

    $('#slider-prev').click(function(){ 
     $('.flexslider .flex-prev').trigger('click'); 
     $('.captions .flex-prev').trigger('click'); 
    }) 
});