Question

下面的代码是一个光滑的轮播，当有人点击幻灯片时，它会弹出整个轮播。这是通过光滑的滑块完成的。

我遇到的问题是弹出旋转木马，因为它一次显示一个滑块我需要它显示3张幻灯片...它有slidesToShow: 3所以我不知道为什么它不工作...... 有什么想法吗？

嵌入代码：

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>

  <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">

CSS：

 .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }

HTML：

<section class="center slider">
    <div class="single">
      <a href="http://placehold.it/350x300?text=1">
        <img src="http://placehold.it/350x300?text=1">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
      </a>
    </div>
</section>

JS：

  <script type="text/javascript">
    $(document).on('ready', function() {


      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        mobileFirst: true
      });

      $('.center').slickLightbox({
        itemSelector: 'a',
        navigateByKeyboard: true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        mobileFirst: true
      });

    });
  </script>

Answer 1

我不使用jQuery，但我不时使用Slick。它看起来你试图从同一个标记启动另一个实例，但可能是slickjs已经有一个实例，在哪里尝试做同样的事情slickLightbox - 快速阅读并注意到它是一个插件/ slickjs的扩展。

所以，我建议你做的是为每个幻灯片添加一个监听器，当它点击时你创建一个新的slickLightbox实例。你也需要一个不同的标记（以保持两者分开，以避免任何实例发生冲突）。

  // mind typos, did this quickly, but the syntax should be similar
  var panels = document.querySelectorAll('.slick .single')
  panels.addEventListener('click', function () {
      $('.cloned-markup').slickLightbox({
        itemSelector: 'a',
        navigateByKeyboard: true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        mobileFirst: true
      });
  })

额外加价：

<div class="cloned-markup">
    <div class="single">
      <a href="http://placehold.it/350x300?text=1">
        <img src="http://placehold.it/350x300?text=1">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
      </a>
    </div>
</div>

Answer 2

您需要将光滑的选项传递给轮播，如下所示：

  $('.center').slickLightbox({
    slick: {
      itemSelector: 'a',
      navigateByKeyboard: true,
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      mobileFirst: true
    }
  });

对于所有其他选项，请点击此处：https://github.com/mreq/slick-lightbox

＆＃13;

$(document).ready(function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    mobileFirst: true
  });

  $('.center').slickLightbox({
    slick: {
      itemSelector: 'a',
      navigateByKeyboard: true,
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      mobileFirst: true
    }
  });
});

＆＃13;

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>




<section class="center slider">
  <div class="single">
    <a href="http://placehold.it/350x300?text=1">
      <img src="http://placehold.it/350x300?text=1">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
    </a>
  </div>
  <div class="single">
    <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
    </a>
  </div>
</section>

＆＃13;

光滑滑块 - 弹出显示3张幻灯片

2 个答案: