带有 Slick Lightbox 的 Slick Carousel答案

【问题标题】：Slick Carousel with Slick Lightbox带有 Slick Lightbox 的 Slick Carousel
【发布时间】：2018-10-04 20:59:04
【问题描述】：

我在将 slick lightbox 添加到 slick 滑块时遇到了一些问题，它不会打开弹出窗口。删除 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>

【问题讨论】：

您是否尝试将完整的图像 URL 添加到 img src？

标签： jquery html slick.js

【解决方案1】：

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

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

【讨论】：