Как подружить Slick и fancybox 3?

Question

[WebforSelf]

Друзья, понадобилось чтоб слик слайдер был во всплывающем окне. Понятно что вызов слика надо осуществлять после запуска fancybox,

Только почему то не выходит ничего. Как добавить функцию slick к запуску fancybox?

$.fancybox.open( 
	  $('#cart_popup'),
	  $('.fast__list1').slick({
		slidesToShow: 4,
		slidesToScroll: 4,
		dots: false,
		prevArrow: '<button class="fast__arrow fast__arrow--prev">'+
			'<svg viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;">'+
				'<g>'+
					'<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5   c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" />'+
				'</g>'+
			'</svg>'+
		'</button>',
		nextArrow: '<button class="fast__arrow fast__arrow--next">'+
			'<svg viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;">'+
				'<g>'+
					'<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5   c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" />'+
				'</g>'+
			'</svg>'+
		'</button>',
		responsive: [{
			breakpoint: 1080,
			settings: {
				slidesToShow: 3,
				slidesToScroll: 3
			}
		}, {
			breakpoint: 768,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}]
	});
	  );

cart_popup это блок под display:none;
а fast__list1 это обертка для списка товаров которые под хайдом.

По факту слик не работает.

Answer 1

[Andrew]

а откуда вы взяли этот код?
есть же коллбэки внутри(по событию открытия)

function initSlick(){
    $('.fast__list1').slick({
    slidesToShow: 4,
    slidesToScroll: 4,
    dots: false,
    prevArrow: '<button class="fast__arrow fast__arrow--prev">'+
      '<svg viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;">'+
        '<g>'+
          '<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5   c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" />'+
        '</g>'+
      '</svg>'+
    '</button>',
    nextArrow: '<button class="fast__arrow fast__arrow--next">'+
      '<svg viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;">'+
        '<g>'+
          '<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5   c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" />'+
        '</g>'+
      '</svg>'+
    '</button>',
    responsive: [{
      breakpoint: 1080,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }, {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }]
  });
}
$.fancybox.open({
	src  : '#cart_popup',
	opts : {
		afterShow : function( instance, current ) {
			initSlick();
		}
	}
});

Еще бы посоветовал unslick написать в afterClose

Comments

[WebforSelf]

Да вот взял с просторов рунета, но не пойму почему параметры slick не учитываются.
я же указал 4 слайда в ряд. А выводит хаос.