制作 田中

Slickを使って簡単カルーセル


20170619_00

今回はスマホ対応のカルーセルを簡単に実装できるjQueryプラグイン「Slick」をご紹介します。
カルーセル用のjQueryプラグインは数多くありますが、現時点では最もポピュラーなプラグインです。

ダウンロード

以下のサイトから、ファイルをダウンロードします。

ダウンロード→slick.

使い方

使い方は以下のとおりです。

css、jQuery、javascriptのファイルをそれぞれ読み込みます。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

body内にスライド表示用のhtmlを書き込みます。

<div class="my-slider">
<div><img src="img/image1.jpg" /></div>
<div><img src="img/image2.jpg" /></div>
<div><img src="img/image3.jpg" /></div>
</div> 

実行用のスクリプトを記述します。

$(document).ready(function(){
  $('.my-slider').slick({
	autoplay: true,
  });
});

オプション

各パラメーターを変更することで、カスタマイズできます。

$('.slider').slick({
  // 左右ボタンで画像切り替え
  accessibility: true,
  // 自動再生
  autoplay: false,
  // 自動再生の時間
  autoplaySpeed: 3000,
  // 自動再生のスピード
  speed: 500,
  // スライドエリアのマウスオンでの一時停止
  pauseOnHover: true,
  // ドットにマウスオンで一時停止
  pauseOnDotsHover: true,
  // 切り替えのアニメーション
  cssEase: 'ease',
  // ドットの表示
  dots: false,
  // ドットのclass名
  dotsClass: 'dot-class',
  // ドラッグの有無
  draggable: true,
  // 切り替え時のフェードイン設定
  fade: false,
  // 矢印表示
  arrows: true,
  // 無限スクロール
  infinite: true,
  // 最初のスライダーの位置
  initialSlide: 0,
  // 画像の遅延表示
  lazyLoad: ‘ondemand’,
  // スライドマウスオーバーで一時停止
  pauseOnHover: true
  // スライドのエリア表示される画像の数
  slidesToShow: 4,
  // 一度にスライドする数
  slidesToScroll: 1,
  // タッチスワイプ
  swipe: true,
  // 縦方向へのスライド
  vertical: false,
  // 表示中の画像を中央へ
 centerMode: true,
  // 中央のpadding
  centerPadding: '80px'
});

デモ

下記にデモを作成しました。
デモ


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。