Having a page with multiple hidden Slick carousels, I want the user to click a specific button to launch the corresponding slider in a modal with a semi-transparent background.
The issue is that when you launch any carousel on the page, all carousels start autoplaying behind each other.
Below is my HTML structure:
<button class="launch-gallery">Launch gallery 1</button>
<div class="modal">
<div class="img-gallery">
<h2>Gallery 1</h2>
<div class="img-gallery__slides">
<div class="img-gallery__slide">
<img src="image-1.jpg" alt="" />
</div>
<div class="img-gallery__slide">
<img src="image-2.jpg" alt="" />
</div>
</div>
</div>
<button class="launch-gallery">Launch gallery 2</button>
<div class="modal">
<div class="img-gallery">
<h2>Gallery 2</h2>
<div class="img-gallery__slides">
<div class="img-gallery__slide">
<img src="image-3.jpg" alt="" />
</div>
<div class="img-gallery__slide">
<img src="image-4.jpg" alt="" />
</div>
</div>
</div>
And here is the JavaScript code to trigger the modal:
var $galleryModal = $('.modal');
$('.launch-gallery').click(function(){
$galleryModal.toggleClass('is-open');
return false;
});
As for the Slick configuration, it looks like this:
var $imgGallery = $('.img-gallery__slides');
$imgGallery.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false,
accessibility: false,
cssEase: 'ease',
autoplay: true,
autoplaySpeed: 5000,
});
The question remains - Is there a way to only launch the carousel related to the button clicked?