@maryna0408

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

Добрый день!
Ребята, подскажите пожалуйста
У меня есть слайдер 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
         }
      }
   ]
});
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы