Flex Slider – 如何为两个滑块添加相同的控件
我正在使用Flex slide r进行一个项目。 我需要在一个页面上使用相同的控件控制两个滑块。
一部分是显示图像的主滑块，第二部分是文本（在这种情况下，它将取自WP中的“the_excerpt”）。
基本上，这是我用来在一个页面上调用两张幻灯片的代码：
$(window).load(function() { $('#main-slider').flexslider({ animation: 'slide', controlsContainer: '.flex-container' }); $('#secondary-slider').flexslider(); }); 现在，我需要将它们“连接”到相同的控件，所以当我点击箭头时，它会滑动/淡化它们。
你可以通过放弃controlsContainer设置并创建自己的导航来完成你想要做的事情，然后链接到两个滑块。 这是一个如何（请注意它未经测试）的想法
你的标记看起来像这样。 注意链接上的rel属性 – 我们将在下面使用它们。 另请注意，值从0开始 – 这与幻灯片的值匹配（例如，第一张幻灯片为0，第二张为1等）。
slide link 1 slide link 2 slide link 3 slide link 3 -
-
-
-
然后设置对flexslider的调用
基本上两个滑块都由同一组导航链接控制。 认为这应该让你朝着正确的方向前进，但如果你需要任何解释的话就会喊叫。
对于Flexslider 2，您可以使用sync: "selector"选项。 只需设置其中一个滑块’ controlNav: false 。
$(window).load(function() { $('#main-slider').flexslider({ animation: 'slide', controlNav: true, sync: '#secondary-slider' }); $('#secondary-slider').flexslider({ controlNav: false }); });
所以，我一直有同样的问题，这可能是一个真正的拖累……但我已经找到了一个简单易行的快速解决方案。 这适用于父母flexslider控制的1个孩子或100个孩子。 适用于所有行动。 希望我能说他们修复这个并允许一系列jquery对象用于同步方法。
然后为你的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
希望这可以帮助！！ 请注意我添加了这个原因它非常类似于我想要做的事情，似乎我不是唯一一个想在flexslider中使用多个同步的人。
我想确认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
}）;
我找到的一个解决方案是创建自己的自定义横幅导航。 根据自己的喜好定位并设计风格。 唯一重要的是有一种方法来定位它。 在这个例子中，我使用了slider-next和slider-prev的ID。
现在，创建两个flexer滑块并根据您的css定位它们。 我将标题我的主要横幅.flexslider和我的标题.captions。
现在让简单的魔法让它发挥作用。 激活javascript文件中的两张幻灯片，并在css中隐藏横幅和标题的导航控件。 这样，您的自定义导航将是唯一可见的控件。 然后，只需创建一个函数，在单击时触发滑块和标题的控件导航。 示例如下。 .trigger jQuery函数就是这里的魔法。 查看其文档： http ： //api.jquery.com/trigger/
//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'); }) });