How to make Fancybox work correctly in slick slider?

Question

JavaScript

Good afternoon!
Guys, tell me please
. I have a slick slider, I want to add a fancybox so that I can enlarge the pictures.
I ran into such a problem: when I open pictures through fancybox and scroll through them, then the sliders scroll to the picture where I stopped and in some cases the "back" button does not want to work, here is the code.
HTML:

<section id="reviews" class="reviews">
        <div class="container">
            <p class="title title_l reviews__title">Отзывы покупателей</p>
            <div class="slider reviews-slider">
                <div class="reviews-slider__slide">
                    <a href="img/reviews/1.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/1.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/2.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/2.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/3.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/3.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/4.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/4.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/5.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/5.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/6.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/6.png" alt="">
                    </a>
                </div>
                <div class="reviews-slider__slide">
                    <a href="img/reviews/6.png" data-fancybox="reviews">
                        <img class="reviews-slider__slide-picture" src="img/reviews/7.png" alt="">
                    </a>
                </div>				
            </div>
        </div>
    </section>

JS:

$(".reviews-slider").slick({
   dots: !0,
   infinite: false,
   slidesToShow: 3,
   slidesToScroll: 1,
   prevArrow: '<div class="slider__arrow slider__arrow-prev"></div>',
   nextArrow: '<div class="slider__arrow slider__arrow-next"></div>',
   responsive:[
      {  breakpoint: 992,
         settings: {
           slidesToShow: 2
        }
      },
      {  breakpoint: 768,
         settings:  {
            slidesToShow: 1
         }
      }
   ]
});

Answer 1

found it for you