制作 田中

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


20170619_00

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

ダウンロード

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

ダウンロード→slick.

使い方

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

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

[html]
<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>
[/html]

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

[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>
[/html]

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

[js]
$(document).ready(function(){
$(‘.my-slider’).slick({
autoplay: true,
});
});
[/js]

オプション

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

[js]
$(‘.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’
});
[/js]

デモ

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


PAGE TOP

CONTACT

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