How to make Slick and fancybox 3 friends?

Question

JavaScript

Friends, it took the slick slider to be in the pop-up window. It is clear that the slick should be called after fancybox is launched, but
for some reason nothing comes out. How to add slick function to fancybox launcher?

$.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 is a block under display:none;
and fast__list1 is a wrapper for the list of products that are under the hide.
In fact, the slick doesn't work.

Answer 1

where did you get this code from?
there are callbacks inside (on the opening event)

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();
    }
  }
});

I would also advise writing unslick in afterClose