主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2016/08/04
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 の該当部分 の書き換え版です。
これで、キーボード対応も完了しました。
タッチの方は、何もいじらなくても想定の動作をしていたので、弄る必要はありませんでした。