slick slider advanced technic

CDN 外部読み込みファイル

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

基本設定テンプレ

$('.slideA').slick({
  infinite: true,
  centerMode: true,
  centerPadding:'0px',
  autoplaySpeed: 0,
  autoplay:true,
  speed: 4000,
  autoplaySpeed:6500,
  arrows: false,
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
  dots: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  fade: false,
  responsive: [
    {
    breakpoint: 1200,
      settings: {
        centerPadding: '330px',
        slidesToShow: 1
      }
    },
    {
      breakpoint: 720,
      settings: {
        fade: false
      }
    }
  ]
});

html

<div class="slideA">
	<img src="images1.jpg">
	<img src="images2.jpg">
	<img src="images3.jpg">
</div>

次のスライド（右端）だけを少しはみ出だして表示

javascript

$('.derecho').slick({
  centerMode: true,
  centerPadding: '40px',
});

css

.derecho .slick-track{
  margin-left: -40px;/*centerPaddingの数値とあわせる*/
}

スライド間の余白

.slick-slide直下のコンテンツの横幅を減らして調節する。画像だけの場合は

css

.slick-slide img{
  width:90%;
  margin:0 auto;
}