Slick carousel

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<div class="switch-btns col-xs-12 margin-bottom-xxs">
   <a href="#" class="icon icon-slide"><span ></span></a>
   <a href="#" class="icon icon-lista active"><span ></span></a>
</div>

function changeToMini(){
console.log("changeToMini");
$('.slider-doctores').slick({
          centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
}

$(document).ready(function(){
      $('.switch-btns .icon').click(function(){
event.preventDefault();
$('.switch-btns .icon').removeClass('active');
$(this).addClass('active');
if($(this).hasClass('icon-slide')){
$('.item-change-slider').addClass('slider-doctores');
changeToMini();
} else {
// $('.item-change-slider').removeClass('slider-doctores');
$('.slider-doctores').slick('unslick');
}
});
    });