光滑滑块上的灯箱并将内容添加到随图像弹出的灯箱

Question

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

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

Answer 2

根据these examples，您可以在slickLightBox html 元素中声明data-YOUR_ATTRIBUTE，并将其作为caption: 'YOUR_ATTRIBUTE' 添加到slickLightBox option 参数对象中，以在每张幻灯片下方添加文本。希望这能解决您的问题。

如果你想添加更多元素，根据@sumitpatel，你可以将html也放入你的data-属性中，比如data-text = '<h2>My heading</h2> <p> My text </p>'，但我认为这个不是很可读。然后我建议将一个函数传递给caption，并为您的元素添加多个属性。您可以在此jsfiddle 中查看示例

您可以查看我从您的 sn-p 编辑的示例：

$('.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: 'text'
  });
});

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 data-text="Member photo" src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img data-text="Member photo" src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img data-text="Member photo" src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img data-text="Member photo" src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img data-text="Member photo" src="https://via.placeholder.com/350x150" alt="Member Photo" />
          </div>
          <div class="team-image">
            <img data-text="Member photo" 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>