WEB Tips デザイン・コーディング

FlexSliderレスポンシブなスライダー作成方法とカスタマイズ

2015-04-13

本記事にはプロモーションが含まれています。

FlexSliderレスポンシブなスライダー作成方法とカスタマイズ

FlexSlider2は、スライドショー、カルーセル、ヒーロー画像の背景など、さまざまなコンテンツをスライド表示できるオープンソースのjQueryプラグインです。

スムーズなアニメーションやモバイルでのタッチスクロールにも対応しており、自動スライド、ナビゲーション機能、スライダー方向のカスタマイズなどが可能です。また、モダンなデザインにマッチするように設計されており、シンプルで使いやすいと評価されています。

FlexSlider2を使ったカルーセルスライダーの使い方を紹介します。

FlexSlider 2

http://flexslider.woothemes.com/thumbnail-slider.html

FlexSlider2の特徴

  1. レスポンシブデザインに対応:様々なデバイスや画面サイズに対応することができます。
  2. カスタマイズ可能なオプションが多い:スライドの速度、自動再生、ナビゲーションの種類、アニメーションの種類などを設定できます。
  3. タッチスワイプに対応:スマートフォンやタブレットなどのタッチスクリーンデバイスに対応しており、ユーザーが指でスライドを操作することができます。
  4. 多機能ナビゲーション:ドット、矢印、サムネイルなどでスライド用ナビゲーションを設定できます。
  5. カスタムアニメーション:スライドの切り替えやフェードイン/フェードアウトなどのアニメーションを追加することができます。

「Flexslider2」の使い方

Flexslider2の設置手順です。

1. FlexSliderのスクリプト・CSSを読み込む

CDNで読み込む場合は下記から

<!-- jQuery ver2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- flexslider -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider.min.js"></script>

<!-- css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css">

FlexSliderはjQuery3では正常に動作しないのでjQuery2を使います

2.スライダー用HTML

fleslider用ラッパー.flexslider.slidesクラスを作成、スライドする要素をliで囲みます。.slidesというクラスは必ず必要で、名前を変更したい場合はオプション指定して変更できます。

<div class="flexslider">
  <ul class="slides">
    <li>スライド0</li>
    <li>スライド1</li>
    <li>スライド2</li>
    <li>スライド3</li>
    <li>スライド4</li>
  </ul>
</div>

3.イニシャライズ

jQuery,flexsliderよりも後に記述します。

$(window).load(function() {
  $('.flexslider').flexslider({
    //カスタマイズはここに記述
  });
});

See the Pen flexslider by mixtaro (@mixtaro) on CodePen.

Flexslider2を複数設置した場合の動作

上記の設置サンプルでは、flexsliderを複数設置しています。flexsliderを1ページに複数設置する場合、スライダー用のラッパー.flexsliderに固有のIDをつけて識別します。どちらもclassは.flexsliderです。

classに.flexsliderをつけないと、ナビゲーションなどの位置がちょっとおかしくなります。

<!-- 一つめのスライダー #slide1 -->
<div class="flexslider" id="slide1">
  <ul class="slides">
    <li>スライド0</li>
    <li>スライド1</li>
    <li>スライド2</li>
    <li>スライド3</li>
    <li>スライド4</li>
  </ul>
</div>

<!-- 2つ目のスライダー #slide2 -->
<div class="flexslider" id="slide2">
  <ul class="slides">
    <li><img src="https://placehold.jp/D6BA73/ffffff/150x150.png"/></li>
    <li><img src="https://placehold.jp/8BBF9F/ffffff/150x150.png"/></li>
    <li><img src="https://placehold.jp/857E7B/ffffff/150x150.png"/></li>
    <li><img src="https://placehold.jp/59344F/ffffff/150x150.png"/></li>
    <li><img src="https://placehold.jp/F5E0B7/ffffff/150x150.png"/></li>
  </ul>
</div>
$(window).load(function() {
//ひとつめのスライダー
  $('#slide1').flexslider({
    animation: "slide"
  });

//2つ目のスライダー
  $('#slide2').flexslider({
    animation: "fade"
  });
});

Flexslider2のオプション

flexsliderで設定できるオプションの一覧です。

基本的なプロパティ

プロパティ初期値説明
namespace:flex-flexsliderが生成する接頭辞を指定
selector:.slides > liスライドするセレクタを指定
animation:fadeアニメーションのタイプ
"fade" or "slide"
easing:swingjquery transtion を指定
direction:horizontalスライドする方向
"horizontal" or "vertical"
reverse:false真偽値(boolean)
アニメーションの方向を逆行するかどうか
animationLoop:true真偽値(boolean)
アニメーションをループさせるかどうか
smoothHeight:false真偽値(boolean)
horizontal modeのときにスライドのたかさを
startAt:0何番目の要素からスライドをスタートするか
slideshow:true真偽値(boolean)
アニメーションスライドを自動再生するか
slideshowSpeed:7000スライドのスピード(ミリ秒:1/1000)
animationSpeed:600アニメーションのスピード(ミリ秒:1/1000)
initDelay:0スライドをスタートするまでの時間
randomize:false真偽値(boolean)
スライドをランダムでスライドさせる
pauseOnAction:true真偽値(boolean)
コントロール要素を操作している間、スライドを中止するかどうか
pauseOnHover:false真偽値(boolean)
マウスオーバーでスライドを中止するかどうか
useCSS:true真偽値(boolean)
css3対応可能な状況ならcss3トランジョンを使う
touch:trueタッチデバイスでスワイプ動作を可能にするかどうか
video:false真偽値(boolean)
スライドに動画を含むかどうか

See the Pen flexslider -carousel by mixtaro (@mixtaro) on CodePen.

スライドのコントロール機能

プロパティ初期値説明
controlNav:trueスライダーナビゲーション(○○○●)を表示するかどうか
directionNav:true両サイドのprev(<),Next(>)を表示するかどうか
prevText:PreviousdirectionNavがtrueの場合の「戻る」のテキスト
nextText:NextdirectionNavがtrueの場合の「次へ」のテキスト

オプション的なナビゲーション機能

プロパティ初期値説明
keyboard:true真偽値(boolean)
キーボードの←→でスライドの移動を可能にするかどうか
multipleKeyboard:true真偽値(boolean)
両サイドのprev(<),Next(>)を表示するかどうか
mousewheel:false真偽値(boolean)
マウスホイールでの移動を許可するかどうか
jquery.mousewheel.js が必須
pausePlay:false真偽値(boolean)
「再生」「停止」ボタンを表示するかどうか
pauseText:Pause文字列
pausePlay:がtrueの時、「停止」ボタンのテキスト
playText:Play文字列
pausePlay:がtrueの時、「再生」ボタンのテキスト

特別プロパティ

プロパティ初期値説明
controlsContainer: FlexSliderのコンテナー要素「.flexslider-container」
manualControls: コントロール要素を独自の名前をつける
例(.flex-control-nav li/#tabs-nav li img)
sync: 他のスライダーと同期させる(扱い注意)
asNavFor: スライダーを別のスライダーのサムネイルナビゲーションにするためのプロパティ

カルーセルオプション

itemWidth:0数値
アイテムの幅サイズ
itemMargin:0数値
アイテム間のマージン
minItems:0数値
アイテムの最小値。画面リサイズ(レスポンシブ)時の下限。
画面が小さくなっても表示させるアイテム数
maxItems0数値
アイテムの最大値。画面リサイズ(レスポンシブ)時の上限。
大きい画面で表示した場合の最大表示数
move:0数値
カルーセルが動くときに移動するアイテムの数

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,