带有光滑灯箱的光滑旋转木马

Question

我有一些问题添加滑块lightbox到滑块，它没有打开弹出窗口。在remove itemSelector img之后，它打开弹出窗口，但是src未定义。有什么提示吗？

JS：

$('.works-slideshow').slick({
    arrows: false,
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 600,
            settings: {
            slidesToShow: 2,
            slidesToScroll: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
            slidesToShow: 1,
            slidesToScroll: 1
            }
        }
    ]
});

$('.works-slideshow').slickLightbox({
  src: 'src',
  itemSelector: '.team-image img'
});

HTML

<div class="row">
      <div class="works-slideshow text-center">
        <div class="owl-item">
          <div class="col-sm-12 mb-sm-20 wow bounceIn">
            <div class="team-item">
              <div class="team-image"><img src="assets/images/ss1.png" alt="Member Photo"/>
              </div>
              <div class="team-descr font-alt">
                <div class="team-name">text</div>
              </div>
            </div>
          </div>
        </div>

Answer 1

似乎您使用了错误的选择器为您的主要滑块/灯箱功能。我在下面添加了一个工作示例。

null

$('.works-slideshow .team-item').each(function() {
  var slider = $(this);
  slider.slick({
    arrows: false,
    dots: false,
    accessibility: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

  var sLightbox = $(this);
  sLightbox.slickLightbox({
    src: 'src',
    itemSelector: '.team-image img'
  });
});

img {
  width: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>


<div class="row">
  <div class="works-slideshow text-center">
    <div class="owl-item">
      <div class="col-sm-12 mb-sm-20 wow bounceIn">
        <div class="team-item">
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
        </div>
        <div class="team-descr font-alt">
          <div class="team-name">text</div>
        </div>
      </div>
    </div>
  </div>
</div>