slick - manabuyasuda/jquery-plugins GitHub Wiki

リンク

インクルード

  • GitHub
  • src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"
  • npm install slick-carousel
  • bower install --save slick-carousel

オプション

$(function() {
  $('.foo').slick({
    arrows: true, // next, previousボタン
    dots: true, // ドットのページャーを表示
    infinite: true, // スライドをループされる
    slidesToShow: 3, // スライドの表示する数
    slidesToScroll: 1, // スライドする数
    // centerMode: false, // 真ん中のスライドに`.slick-center`をつける
    // centerPadding: '60px', // 真ん中のスライドと左右のスライドの余白
    cssEase: 'linear', // アニメーションの種類（ease/linear/ease-in/ease-out/ease-in-out）
    speed: 300, // スライドをめくる速度
    // fade: true // フェード
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1
      }
    }
  ]
  });
});

HTML

<div class="foo">
  <div class="foo-child">1</div>
  <div class="foo-child">2</div>
  <div class="foo-child">3</div>
  <div class="foo-child">4</div>
  <div class="foo-child">5</div>
  <div class="foo-child">6</div>
</div>

CSS

CSSはslick.cssとslick-theme.cssを読み込む。アイコンは疑似要素で表示されている。左右のarrowはpostion'とtransform`で配置されているので、横幅によっては位置の調節が必要。

.slick-prev:before {
  content: "<";
  display: block;
  color: #000;
}

.slick-next:before {
  content: ">";
  display: block;
  color: #000;
}

.slick-dots li button:before {
  content: "●";
  font-size: 1rem;
}
⚠️ **GitHub.com Fallback** ⚠️