slick-carousel カルーセル

slickの読込み

読込みコード

<head>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="自作.css">
</head>

<body>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="自作js"></script>
</body>

フェードタイプのスライダー

HTML

<div class="f-fade-1">
<div><img スライダー用１></div>
<div><img スライダー用１></div>
<div><img スライダー用１></div>
</div>

CSS

特に今回のプラグインで時間がかかった箇所です。
レスポンシブに対応させようとすると崩れてしまったので下記コードを追加しました。
参考にしたサイト。
https://incloop.com/slick-js-flexbox/

本当に助かりました。ありがとうございました。

/*slick*/
    
* {
min-height:0;
min-width : 0;
}   
.f-fade-1{
width: 85%;
margin: 20px auto;
    
}

jQuery

//slick
$('.f-fade-1').slick({
  autoplay: true, //自動再生
  dots: true,
  infinite: true,
  speed: 1000,
  fade: true,
  cssEase: 'linear'
});

center mode

center mode

center mode

HTML

<div class="center mypattern">
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
</div>

CSS

.mypattern .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

jQuery

//slick center mode 
$('.center').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
      }
    }
  ]
});

autoplay

HTML

<div class="autoplay">
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
<div><img スライダー用></div>
</div>

jQuery

//slick auto play   
$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

slick-carousel カルーセル

slickの読込み

フェードタイプのスライダー

center mode

center mode

center mode

autoplay

JavaScript・jQueryのおすすめ

slick-carousel　カルーセル