Slick slider in bootstrap modal?

Question

JavaScript

I'm making a slick slider in a modal.

$('#modalGoods').on('shown.bs.modal', function () {
    $('.goods_slider').fadeIn(); //Что бы не прыгало изображение при открытии

    $('.goods_slider').slick({
      slidesToShow: 3,
      speed: 1000,
      dots: true,
      arrows: false,
      responsive: [
          {
            breakpoint: 768,
            settings: {
            	centerMode: false,
            	slidesToShow: 1,
            	dots: false,
            	arrows: true,
            }
        }]       
    });
  });

When you first open it, everything works great.
When repeated, in the console an error

how to fix it?

Answer 1

Try like this:

$('#modalGoods').on('shown.bs.modal', function () {
    $('.goods_slider').fadeIn(); //Что бы не прыгало изображение при открытии
    $('.goods_slider').slick('unslick');
    $('.goods_slider').slick({
      slidesToShow: 3,
      speed: 1000,
      dots: true,
      arrows: false,
      responsive: [
          {
            breakpoint: 768,
            settings: {
            	centerMode: false,
            	slidesToShow: 1,
            	dots: false,
            	arrows: true,
            }
        }]       
    });
  });