jquery - 光滑 slider 上的灯箱并将内容添加到与图像一起弹出的灯箱

Question

我遇到了光滑 slider 的问题，我想创建一个应该在光滑 slider 上打开的灯箱，我想在灯箱中添加一些内容，主要问题是我不知道如何我可以将内容添加到灯箱部分吗？

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

我想要是否可以显示内容 div 以及图像作为灯箱或弹出窗口

Answer 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',
    caption:function(element, info) {
    var span=$(element).parent().find(".desc");
    return span.html(); }
  });
});

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 class="desc"><h3>Test 1</h3></div>
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
            <div class="desc"><h3>Test 2</h3></div>
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo"  />
            <div class="desc"><h3>Test 3</h3></div>
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo"  />
            <div class="desc"><h3>Test 4</h3></div>
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
            <div class="desc"><h3>Test 5</h3></div>
          </div>
          <div class="team-image">
            <img src="https://via.placeholder.com/350x150" alt="Member Photo" />
            <div class="desc"><h3>Test 6</h3></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

只需根据需要更改 h3