☰
trisle Written by kawashima

slickの設定やオプション

JavaScript

↓とても詳しい↓
http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

ダウンロード

https://kenwheeler.github.io/slick/

オンラインのslick

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

JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

※2021年9月11日時点

必要なファイル

  • slick.css
  • slick.min.js

うまくいかない時確認すること

  • jqueryより先に読み込んでいないか
  • 記述方法はあっているか
  • ブラウザのjavascriptエラーを確認

slickのオプション

https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7

よく使うオプションの設定

$('.mv_swich').slick({
	autoplay : true,
	autoplaySpeed : 3000,
	speed : 1000,
	infinite : true,
	arrows : false,
	dots : false,
	fade : true,
	slidesToShow: 1,
	slidesToScroll: 1,	pauseOnFocus: false,	pauseOnHover: false,
});

流れ続けるオプション

$('.my_slide').slick({
  autoplay: true,
  autoplaySpeed: 0,
  speed: 20000,
  cssEase: "linear",
  slidesToShow: 4,
  swipe: false,
  dots: false,
  arrows: false,
  pauseOnFocus: false,
  pauseOnHover: false,
});

流れ続けるオプション（逆再生）

先ほどのオプションに「rtl: true,」を追加。

$('.my_slide').slick({
  autoplay: true,
  autoplaySpeed: 0,
  speed: 20000,
  cssEase: "linear",
  slidesToShow: 4,
  swipe: false,
  dots: false,
  arrows: false,
  pauseOnFocus: false,
  pauseOnHover: false,
  rtl: true,
});

htmlに「dir=”rtl”」を追加

<ul class="my_slide" dir="rtl">
〜（省略）〜
</ul>

 

>  >  slickの設定やオプション