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

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

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

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

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">

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.

<!-- 一つめのスライダー #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"
  });
});