menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/19
  • JQuery

レスポンシブに特化したカルーセルスライダー 「slick.js」の使い方

レスポンシブ対応で簡単にカルーセルを実現。高機能・高品質なカルーセル・スライダーjQueryプラグイン「slick」の使い方を紹介します。
slick

使用方法

ダウンロード

slick.js

準備するファイル

・jquery.js


・slick.js


・slick.css.css


・slick-theme.css


・fontフォルダ

外部ファイルの読み込み

head内へ以下を追加します。

HTML

スライドの親要素に任意のclass名をつけるだけです。Listタグではなくdiv要素で囲むだけでもよいです。


JavaScript


シンプルスライダー

シンプルなスライダー


複数表示

複数画像のスライダー(カルーセル)


センターモード

メイン画像をセンターで表示


フェード

フェードアニメーション


サムネイルスライダー

スライダーの下にサムネイル表示

OPTION

accessibility :左右ナビゲーションボタン true/false
autoplay :オートプレイ true/false
autoplaySpeed :スライドの表示時間 デフォルトは3000
cssEase :CSS3でのアニメーション ease,linear,ease-in,ease-out,ease-in-out
dots :ドット表示 true/false
draggable :ドラッグによるコントロール true/false
easing :jQuery easingの種類を指定 true/false
fade :フェードイン設定 true/false
arrows :左右のナビゲーション表示
vertical :縦方向へのスライド true/false
infinite :スライドのループ設定 true/false
swipe :タッチスワイプの設定 true/false
responsive :レスポンシブのブレークポイント設定

この他にも複数のオプションがあります。

とても有名でカルーセルを実装する場合はオススメのプラグイン。複数のオプションもありレスポンシブにも特化しています。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11