前置き
今回はカルーセルライブラリslickを用いて実装して行くので、１から実装したい方には向かない記事になっています。
slick: スライダーで実現したい大体の機能は兼ね備えていて、それを直感的に設定できる優秀なライブラリ。
公式はこちら:http://kenwheeler.github.io/slick/
導入段階は今回書きませんがこのあたりの記事が参考になります。
http://uzurea.net/explanation-of-jquery-slider-slick/
さて、本題です。
デフォルトではslickによるスライダーは、左右矢印のクリックおよびドラッグによるスライドで画像を切り替えられます。これはもちろん優秀な機能なのですが、
「左右矢印のクリック判定を、画像そのものの右半分、左半分に割り振って、それぞれをクリックするとスライドする」
という機能にするには少々手を加える必要がありました。
こんなかんじ。
クリック判定の実装
矢印の要素そのものの領域を広げれば、何も書かなくてもクリック判定ができる。
矢印要素のコードを検証ツールで見てみるとこんなかんじになっている。
このbutton要素の領域をcssで調整して、before要素である矢印マークの位置をいい感じにしてあげればよさそうだ。
画像の右半分、左半分に領域を設定するのは、親要素の幅の50%に指定することでいけそうだ。
.slick-prev {
height: 100%;
width: 50%;
left: 0; /*幅を画像の50%にして左寄せ*/
}
.slick-prev:before {
position: absolute;
left: 8px; /*何もしないと要素の中央になってしまうので位置調整*/
content: '◀︎';
}
.slick-next {
height: 100%;
width: 50%;
right: 0; /*幅を画像の50%にして右寄せ*/
}
.slick-next:before {
position: absolute;
right: 8px; /*何もしないと要素の中央になってしまうので位置調整*/
content: '▶︎';
}
これで、画像の右半分をクリックすれば次の画像に、左半分をクリックすると前の画像に遷移するようになった。
その操作ができるよ！ってユーザーに伝える
根幹機能の実装自体はすぐできましたが、ここからが意外とつまづきました。
上記で実装した機能が使えることをユーザーに伝えるために、
「画像のそれぞれ半分にマウスが乗った時に矢印アイコンを目立たせる」
という実装をしてみます。
通常、これをやるにはJSでクリック判定した要素を取得して、矢印アイコンの要素のcssを変更するというごくシンプルな方法でできます。
しかし今回の場合、cssに変更を加えるのはbefore要素、つまり擬似要素。
擬似要素は非DOMなので、普通にJSで操作しようとしてもうまくいかないんでした。
一応擬似要素を動的にいじる方法はあるようで、今回の場合この記事
http://ithat.me/2015/11/30/jquery-css-pseudo-before-after-change
の２番目にある、無理やりhead要素にstyleタグを追加して書き換える方法が取れそうでしたが、それをやらずとも一応なんとかなりました。
before要素の元要素となるbutton要素自体のopacityを動的に変えることで、before要素の矢印も見え方が変わるようにしました。
$(function() {
$('.slick-prev').on('mouseenter', function(){
$(this).css('opacity', '1');
});
$('.slick-prev').on('mouseleave', function(){
$(this).css('opacity', '.5');
});
$('.slick-next').on('mouseenter', function(){
$(this).css('opacity', '1');
});
$('.slick-next').on('mouseleave', function(){
$(this).css('opacity', '.5');
});
})
これで、マウスが離れているときは半透明50%、マウスが乗った時は不透明になる変化にできました。
ただしこの方法は今回のように元要素が透明な場合などcssをいじっても影響がない時にしか使えないので、大体のケースは上にある擬似要素を動的にいじる方法でやるべきかと思います。
もっといい方法があれば、教えてください。
エンジニア歴３ヶ月です。コメント待ってます。