https://toolpy.app/js/script.js

1$(document).ready(function(){
2	 const $bigGallery = $('.big__gallery');
3	 const $smallGallery = $('.small__gallery');
4	 const bigSlidesCount = $bigGallery.find('.el').length;
5
6	 if (bigSlidesCount > 0) {
7	 	$bigGallery.slick({
8		  slidesToShow: 1,
9		  slidesToScroll: 1,
10		  arrows: bigSlidesCount > 1,
11		  infinite:false,
12		  responsive: [
13		    {
14		      breakpoint: 991,
15		      settings: {
16		        arrows: false,
17		        dots: bigSlidesCount > 1
18		      }
19		    }
20		  ]
21		 });
22	 }
23
24	 $bigGallery.on('afterChange', function(){
25	 	const currentSlideId = $bigGallery.find('.slick-current').attr("data-slideid");
26	 	$smallGallery.find('.current').removeClass("current");
27	 	$smallGallery.find('.el[data-slideid='+ currentSlideId +']').addClass("current");
28	 });
29
30	 $smallGallery.on("click", ".el", function(e){
31	 	e.preventDefault();
32	 	$smallGallery.find('.current').removeClass('current');
33	 	$(this).addClass("current");
34	 	if ($bigGallery.hasClass('slick-initialized')) {
35	 		$bigGallery.slick('slickGoTo', $bigGallery.find('.el[data-slideid='+ $(this).attr("data-slideid") +']').attr("data-slick-index"));
36	 	}
37	 });
38});