javascript - 光滑的滑块-弹出时显示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>

最佳答案

您需要像这样将圆滑的选项传递给轮播：

  $('.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

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

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

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

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

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

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

关于javascript - 光滑的滑块-弹出时显示3张幻灯片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44052003/