のせっち 
こんにちは！のせっち@nosecchi01です。
jQueryスライダーの定番、Slickを使って、流れ続けるスライダーを作成する方法をご紹介します。
サンプルがありますので、コピペするだけで使用可能です。
その後簡単な解説を付けています。
早速行ってみましょう！
目標物を確認
早速Codepenで見ていきましょう。
See the Pen Slick Sample – Infinite Scroll by Yuki Nose (@yukinouz1) on CodePen.
スライダーが停止せずに流れ続けているのがわかります。
上下段に別れていて、下段は逆方向に流れています。
Slickの基本をおさらい（知っている人は飛ばしてOK）
Slickの基本をおさらいしておきましょう。
初心者向けにインストールから超ベーシックな設定までを解説していきます。知っている人は飛ばしてOKです。
まずは、jQueryとslickを読み込んでおきます。
SlickはCDNが用意されていますのでそちらを使えばOKです。
<!-- css -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css"/>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- js -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>npmで使う場合は、下記のような感じ。
import 'slick-carousel';CSSも読み込みたい場合は、下記も追加。
import 'slick-carousel';
import 'slick-carousel/slick/slick.css'; // 追加
import 'slick-carousel/slick/slick-theme.css'; // 追加cssを使う場合は、css-loader, style-loaderが必要です。
では、Slickを動かしてみます。
『まずは動かすこと』を目標に、超シンプルな構成でやってみましょう！
See the Pen Slick Basic by Yuki Nose (@yukinouz1) on CodePen.
超基本中の基本は、下記のようにHTMLとjsを用意すればOKですね！
<div class="your-class">
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
</div>$('.your-class').slick();.slick({})中にオプションを追加することで、動きに変化を付けることができます。
上記の例では、autoplay: trueを付けて、自動的にslickが切り替わるようにしました。
流れ続けるスライダーの解説
もう一度codepenを見てみます。
See the Pen Slick Sample – Infinite Scroll by Yuki Nose (@yukinouz1) on CodePen.
流れとしては、下記です。
- HTMLを用意。（基本通り）
- 逆方向に動かしたい場合は、dir=”rtl”を付けておく
- オプションを設定（設定内容をこれから解説します。）
HTMLは基本通りで、js側で適切なオプションを設定してあげるだけでOKです。
各オプションがどういう働きをしているか？
- infinite: true ・・・最後まで来たら最初に戻る（無限ループさせる）
- arrows: false ・・・ 次へ、前への矢印を表示しない
- swipe: false ・・・ スワイプを無効に
- dots: false ・・・ ドットナビゲーションを出さない
- variableWidth: true ・・・スライド幅の自動計算を無効に
- autoplay: true ・・・ 自動でスライドが流れるように
- autoplaySpeed: 0 ・・・ スライドの自動再生時の変更間隔を設定（ミリ秒）
- speed: 9000 ・・・ スライドが流れる時間を設定（ミリ秒）
- cssEase: “linear” ・・・ イージングを指定（ease, ease-in, linear）
- rtl: true ・・・ 逆方向にスライドさせる
重要な部分はこれだけ
流れ続けさせるために重要なオプションは下記ですね！
- infinite: true // 初期値trueなので書かなくてもOK
- autoplay: true
- autoplaySpeed: 0
- speed: 9000
- cssEase: “linear”
Slickの各オプションについて詳しく知りたい人は「Slick – にほんご。」がオススメです！
お疲れ様でした。
まとめ
・Slickを使えば流れ続けるスライダーをつくることができる。