Как сделать slick слайдер в fancybox?

Question

[Сергей Кравченко]

Доброго времени суток. Пытаюсь впихнуть slick слайдер в fancybox. Но у меня не все получается.

вот такое использую для этого. Код переработан, раньше его использовал для bxslider. И там подобная конструкция работала. Не работает именно первый слайдер. Может кто сталкивался с такой ерундой, подскажите как исправить.

$('.fancybox-modal').fancybox({
        autoSize: true,
        onUpdate: function () {
            try {
                window.slider.slick('slickCurrentSlide');
            } catch (e) {}
            var el = $($(this).attr('href'));

            window.slider = el.find('ul.slider-modal').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                asNavFor: '.slider-nav',
                dots: false,
                responsive: true

            });
            window.slider = el.find('ul.slider-nav').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                asNavFor: '.slider-modal',
                dots: true,
                centerMode: true,
                variableWidth: true,
                focusOnSelect: true
            });

        }
    });

Comments

[Alexander Belov]

Что именно не работает? Есть живой пример?

Answer 1

[dmz9]

1. не то событие
2. пересохраняешь window.slider 2 раза. зачем? сделай для них разные переменные и вообще желательно внутри document.ready а не в глобале

<a href="#modal" id="fancybox">Показать слайдер в окне</a>
<div class="modal" id="modal">
    <div class="slider">
        <div id="slick">
            <div class="slider__item">
                <div>1</div>
            </div>
            <div class="slider__item">
                <div>2</div>
            </div>
            <div class="slider__item">
                <div>3</div>
            </div>
            <div class="slider__item">
                <div>4</div>
            </div>
            <div class="slider__item">
                <div>5</div>
            </div>
            <div class="slider__item">
                <div>6</div>
            </div>
            <div class="slider__item">
                <div>7</div>
            </div>
        </div>
    </div>
    <div class="slider">
        <div id="slick2">
            <div class="slider__item">
                <div>11</div>
            </div>
            <div class="slider__item">
                <div>22</div>
            </div>
            <div class="slider__item">
                <div>33</div>
            </div>
            <div class="slider__item">
                <div>44</div>
            </div>
            <div class="slider__item">
                <div>55</div>
            </div>
            <div class="slider__item">
                <div>66</div>
            </div>
            <div class="slider__item">
                <div>77</div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    $('#fancybox').fancybox({
        autoSize: true,
        afterShow: function() {
            var main = '#slick';
            var support = '#slick2';
            $(main).slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                asNavFor: support,
                dots: false,
                responsive: true
            });
            $(support).slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                asNavFor: main,
                dots: true,
                centerMode: true,
                variableWidth: true,
                focusOnSelect: true
            });
        }
    });

})

Answer 2

[Антон Кирпач]

А может наоборот все (fancybox в slick слайдере)?

<a href="#modal">Кнопка</a>
<div class="remodal" data-remodal-id="modal">
	  <button data-remodal-action="close" class="remodal-close"></button>
	  <h1>Remodal</h1>
	  	    <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>
	  <br>
	  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
	  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

$(document).on('opened', '.remodal', function () {
	  $(".regular").slick('reinit');
	});

$(document).on('ready', function() {
		
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
});

Comments

[Сергей Кравченко]

зачем мне наоборот? мне надо что бы в модальном окне которое создается средствам fancybox работал сдайдер slick .

[Антон Кирпач]

Сергей Кравченко: Тогда проще намного использовать remodal (если открывать модальное окно)

[Сергей Кравченко]

Антон Кирпач: а как через ваш remodal это сделать? у меня что-то не получилось

[Антон Кирпач]

Сергей Кравченко: Там все довольно просто. Просто при открытии модального окна перезагружается слайдер. Выше написал

Answer 3

[L2Banners]

Тоже понадобилось вывести слайдер в модальном окне.
Вызываем данную функцию после того как активируем таб
$(".slider").slick('setPosition');

А событие reinit пере создает новый слайдер, оно не подходит