Question

FIDDLE：http://jsfiddle.net/2patspw2/3429/

我正在使用featherlight作为我的模态框并在其中运行lightslider。它在第一次点击时运行正常，但由于某种原因它们似乎会出错并复制自己。我原以为它可能是重复的幻灯片所以我读了轻滑块文档并添加了这个：

 onSliderLoad: function(el) {
        el.lightGallery({
          selector: '.gal .lslide'
        });

这没有解决问题，所以我试着像这样做一个函数（索引）的each（）：

$('.inline').each(function(index) {
  $(document).on("click", '.modal', function() {
// relevant code
});
});

我将它绑定到委托事件，因为我必须通过on：click激活。然而，元素似乎仍然复制自己？

HTML：

<a href=".inline" class="modal" data-featherlight>Inline</a>

<div class="inline">
  <ul class="gal">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> TEST!!!!
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
  </ul>
</div>

<a href=".inline-two" class="modal" data-featherlight>Inline2</a>

<div class="inline-two">
  <ul class="gal">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> asfasdf
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
  </ul>
</div>

jQuery的：

$(document).each(function(index) {
  $('.modal').on("click", function() {
    $('.gal').lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      thumbItem: 9,
      slideMargin: 0,
      enableDrag: false,
      currentPagerPosition: 'left',
      onSliderLoad: function(el) {
        el.lightGallery({
          selector: '.gal .lslide'
        });
      }
    });
  })
});

为什么旋转木马基本上会复制导航和窃听？注意我也尝试过loop: false，并没有改变任何内容。

Lightslider在第二次点击时在羽毛灯内闪光

0 个答案: