javascript - 在 bxslider 中使用 fancybox 时显示多个缩略图

Question

我在 bxslider 中使用 fancybox。当我打开图像时，多个缩略图会一次又一次地重复它们。只有在我添加 bxslider 后才发生这种情况。不知道这是如何发生的。HTML 代码

            <!-- End .overlay -->
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic2.jpg" class="fancybox" rel="gallery1" >
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic3.jpg" class="fancybox" rel="gallery1">
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic4.jpg" class="fancybox" rel="gallery1">
          </a>
        </article>

Bx slider :

  $(document).ready(function(){
          $('.fourslide').bxSlider({
              slideWidth: 280,
              minSlides: 1,
              maxSlides: 4,
              moveSlides: 1,
              slideMargin: 0,
              adaptiveHeight:true,
              controls:true,
              auto:false
          }
          );
      }
      );

Answer 1

您应该从 Bxslider 元素克隆中删除 rel 属性。通常可以使用onSliderLoad函数来实现:

$(document).ready(function(){
    $('.fourslide').bxSlider({
        slideWidth: 280,
        minSlides: 1,
        maxSlides: 4,
        moveSlides: 1,
        slideMargin: 0,
        adaptiveHeight: true,
        controls: true,
        auto: false,
        onSliderLoad: function(){
            $('.bx-clone').each(function(){
                $(this).removeAttr('rel');
            })
        }       
    });
});