Slickを使って流れ続けるスライダーを作る【コピペOK】

こんにちは!のせっち@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を使えば流れ続けるスライダーをつくることができる。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。