时间戳

首页 > 解决方案 > 带有灯箱的光滑轮播以显示带有背景图像的 div

jquery - 带有灯箱的光滑轮播以显示带有背景图像的 div

问题描述

我正在尝试将光滑的灯箱添加到幻灯片中，其中只有带有背景图像的 div。打开灯箱时不显示图像。你怎么看？有可能的？

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: false,
  autoplay: true,
  autoplaySpeed: 5000,
  adaptiveHeight: true
});
$('.slider-for').slickLightbox({
  src: false,
  itemSelector: '.team'
});
<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="slider-for">
  <div class="team" style="background-image: url(https://via.placeholder.com/700x350); background- repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </div>
  <div class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </div>
  <div class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </div>
  <div class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </div>
</div>

标签： jqueryhtmlcss

解决方案

如果您希望灯箱在使用 CSS 背景时与 Slick 一起使用，则需要使用<a>带有href指向图像的标签而不是<div>标签。

如果可能，您还应该避免使用内联样式并使用外部 CSS 表单。

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: false,
  autoplay: true,
  autoplaySpeed: 5000,
  adaptiveHeight: true
});
$('.slider-for').slickLightbox({
  itemSelector: '.team'
});
<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="slider-for">
  <a href="https://via.placeholder.com/700x350" class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </a>
  <a href="https://via.placeholder.com/700x350" class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </a>
  <a href="https://via.placeholder.com/700x350" class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </a>
  <a href="https://via.placeholder.com/700x350" class="team" style="background-image: url(https://via.placeholder.com/700x350); background-repeat:no-repeat; background-position:100%; background-size:cover; height: 350px; width:750px;">
  </a>
</div>

推荐阅读