CODEWITHSUNDEEP
jqueryhtmlcss
doli
doli

Reputation: 63

slick carousel with lightbox to show div with background image

I'm trying to add slick lightbox to slide, where is only div with background image. When open lightbox don't show image. What do you think? It is possible? 

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

Upvotes: 0

Views: 1074

Answers (1)

volt
volt

Reputation: 1003

If you want lighboxes to work with Slick while using CSS backgrounds, you need to use an <a> tag with an href that points to the image instead of <div> tags.

You should also avoid inline styles and use an external CSS sheet if possible.

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

Upvotes: 1

Related Questions