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

dots用CSS

ul.slick-dots {
   margin: 0px 0 0px;
   text-align: center;
}
.slick-dots li{
   position: relative;
   display: inline-block;
   width: 12px;
   height: 12px;
   margin: 0px 7px;
   padding: 0;
   cursor: pointer;
}
.slick-dots li button  {
   font-size: 0;
   line-height: 0;
   display: block;
   width: 12px;
   height: 12px;
   padding:  0 ;
   cursor: pointer;
   color: transparent;
   border:none;
   outline: none;
   background: #ccc;
   border-radius: 12px
}
.slick-dots li.slick-active button{
   background: #6DAAA3;
}

arrows

前後ナビリンクCSS

.slick-slider .slick-next,
.slick-slider .slick-prev{
   font-size: 20px;
   position: absolute;
   top: 50%;
   margin-top: -25px;
   width: 50px;
   height: 50px;
   border-radius: 50px;
   border: none;
   color: #086477;
   background: transparent;
   box-shadow: 2px 2px 3px #ccc;
   cursor: pointer;
   z-index: 9
}
.slick-slider .slick-next {right: -20px;}
.slick-slider .slick-prev {left: -20px;}

fontawesomeの矢印マークを使う場合

$(document).ready(function() {
    $('.slider.slick-slider .slick-next').html('');
    $('.slider.slick-slider .slick-prev').html('');
});