Как настроить корректную работу Fancybox в слайдере slick?

Question

[maryna0408]

Добрый день!
Ребята, подскажите пожалуйста
У меня есть слайдер slick, хочу прикрутить еще fancybox чтобы можно было увеличивать картинки.
Столкнулась с такой проблемой: когда открываю картинки через fancybox и листаю их, то потом слайдерсам перелистывается на ту картинку, на которой я остановилась и еще при некоторых случаях не хочет раотать кнопка "назад" , вот код.

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

[Sashqa]

вот нашел за вас

Comments

[maryna0408]

это не то, вот такой нужно https://www.happynenia.in.ua/ там где блок отзывов

[Sashqa]

maryna0408,
https://codepen.io/kotovaa/pen/PoYpyxX

[maryna0408]

Sashqa, если я нажимаю на первую картинку и через fancybox долистываю к примеру до 5 или 7, то слайдер автоматически переключается чтобы была видна эта картинка, в этом и проблема (как сделать чтобы fancybox и слайдер работали не зависимо друг от друга)?

[Sashqa]

maryna0408, почему так работает на этом сайте совсем не понятно.
могу Вам лишь предложить отключить перелистывание во время активного фенсибокса.

Answer 2

[lchsha]

Была похожая проблема, у wrappera убирал "overflow: hidden;" , когда был открыт фансибокс, помогло

body.fancybox-active {
.wrapper {
overflow: visible;
}
}