在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>

Bxslider：

  $(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');
            })
        }       
    });
});