Flexslider JS - 在 3 个滑块上使用“asnavfor”和“同步”？答案

【问题标题】：Flexslider JS - using 'asnavfor' and 'sync' on 3 sliders?Flexslider JS - 在 3 个滑块上使用“asnavfor”和“同步”？
【发布时间】：2013-06-01 08:10:48
【问题描述】：

我正在尝试创建一个包含 3 个 div 的画廊，其中包含同步的滑块（主图像、缩略图轮播和文本信息）。使用“as navfor”和“同步”功能，除了单击图像缩略图时，文本信息不会与 JS 同步，否则我可以正常工作：

<script type="text/javascript">
    $(window).load(function() {
        // The slider being synced must be initialized first
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 233,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#info').flexslider({
            animation: "fade",
            controlNav: false,
            directionNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel",
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#info",
        });
    });

</script>

所以本质上我想同时制作#carousel 'asNavFor' #slider 和#info。如果我分别添加两者，则第二个取代第一个。逗号分隔也不起作用。最少的 JS 知识。非常感谢任何帮助...

【问题讨论】：

如果有人偶然发现这一点并且正在苦苦挣扎 - 最后我重新编写了我正在使用的 flexslider 模块的 php 并调整了 css 以实现两个滑块的效果 - 主滑块产生一个75% 宽的图像和一个 25% 的文本面板，使用图像标题和标题。这里的例子 - justbecausestudio.com/index.php/portfolio/originals

标签： jquery flexslider

【解决方案1】：

检查下面链接的问题的第二个回答。作者声称该代码可以同步 2 个或更多滑块。我的第一次尝试失败了，但我仍然希望它能够奏效。

Flex Slider - How to add same controls for two sliders

我会在这里重新发布他的代码：

HTML：

<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);
  }   
}

【讨论】：