なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2016/08/04

FlexSlider で右開きのコンテンツを作りたい

カテゴリー：

JavaScript

jQuery.FlexSlider 、スライドショーとか作れて便利みたいなのですが、
例えば漫画だったり小説だったりは、日本だと右開きになっています。

ということで、若干無理やりな気がしますが、 FlexSlider で右開きのコンテンツを作ります。

上の通り、右開きのコンテンツ(漫画・小説)なので、そういうふうに作っていきます。
まずは通常通り配置します。

<div class="flexslider">
  <ul class="slides">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

$(window).load(function () {
  $(".flexslider").flexslider();
});

次に、 FlexSlider の設定を行います。
必要最低限のものだけ書いてます。

$(".flexslider").flexslider({
  reverse: true,
});

最後に、 CSS の変更。
FlexSlider 自体が左開きを想定しているので、次へ進むボタンが右側に表示されているので。

flex-direction-nav {
  a {
    &:before {
      content: "\f002";
    }

    &.flex-next:before {
      content: "\f001";
    }

    .flex-prev {
      left: initial;
      right: -50px;
      text-align: right;
    }

    .flex-next {
      left: -50px;
      right: initial;
      text-align: left;
    }

    .flexslider:hover & {
      .flex-prev {
        left: initial;
        right: 10px;
        text-align: right;
      }

      .flex-next {
        right: 10px;
        left: initial;
        text-align: left;
      }
    }
  }
}

これで、マウスでぽちぽち操作する分については、右開きの対応ができました。

次は、キーボード操作に対応していきます。
FlexSlider は、キーボード十字キーの左右でも操作が可能です。
ということで、まずは設定を変更。

$(".flexslider").flexslider({
  reverse: true,
  keyboard: false,
});

そして実装。
init コールバック部分に記述していきます。

$(".flexslider").flexslider({
  reverse: true,
  keyboard: false,
  init: function(fs) {
    $(document).on('keyup', function(e)) {
      var keycode = e.keyCode;
      if(keycode === 39 || keycode === 37) {
        var target = (keycode === 39) ? fs.getTarget('prev') :
                     (keycode === 37) ? fs.getTarget('next') : false;
        fs.flexAnimate(target);
      }
    }
  }
});

FlexSlider の該当部分の書き換え版です。
これで、キーボード対応も完了しました。
タッチの方は、何もいじらなくても想定の動作をしていたので、弄る必要はありませんでした。