单击“弹性滑块”滑动时，打开“花式框”，从而产生冲突

Question

我结合使用Fancybox和Flexslider。弹性滑块会自动播放，当我单击幻灯片时，它确实打开了花式框，唯一的问题是在花式框中，它继续播放幻灯片（通过弹性滑块）......然后图像开始消失并重新出现——本质上它开始发生冲突。

如何在打开花式盒子时停止弹性滑块幻灯片并在花式框关闭时播放？

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider({
        animationLoop: true,
        pauseOnHover: false,
        controlNav: false,
        directionNav: false,
        slideshowSpeed: 4000,
    });
});
jQuery(function($) { 
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
});
</script>

这是html/php：

<div id="imgHolder" class="flexslider">
  <ul class="slides" style="margin:0px!important;padding:0px;">
    <li class="fancybox" rel="group" style="list-style-type:none!important;">
      <img src="<?php echo the_field('product_image_row'); ?>" alt="<?php echo the_title(); ?>" width="318" height="294">
    </li>
    <?php $counter=1 ; while(the_repeater_field( 'thumbnail_images_row')): ?>
    <li class="fancybox" rel="group" style="list-style-type:none!important;">
      <img src="<?php echo the_sub_field('image_row'); ?>" width="318" height="294" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
    </li>
    <?php $counter++; endwhile; ?>
  </ul>
</div>

Answer 1

通过将我的javascript更改为以下内容来解决这个问题：

<script type="text/javascript">
   $(window).load(function() {
      $('.flexslider').flexslider({
         animation: "slide",
         animationLoop: true,
         directionNav: false,
         controlNav: false,
         slideshow: true
      });
   });
   $(".fancybox").fancybox({
      helpers : {
         overlay : {
            locked : false,
            arrows : true,
            nextClick : true
         }
      }
   });
</script>