
ブログなどに簡単に実装できる画像スライダー bxSlider を紹介します。
オプションも豊富で、自分好みのスライダーを実装することができます。
写真をたくさん利用する Web ページなどは、使う価値がありそうですね。
こんにちは、HARU( @HARU )です。
画像などをスライドショー形式で表示させたいことありませんか?
今回は Blogger に JQuery 画像スライダーである bxSlider を実装する方法をご紹介します。
ブログのデザインにも使えそうなので、実装しておいて損は無いと思います。
テンプレートの編集( ソースコード改変 )をするときは、必ずバックアップを取ってから編集しましょう。
不安な方は以下の記事を参考にしてください。
bxSlider とは
bxSlider は JQuery で動作するスライダーで、レスポンシブデザインにも対応しています。
主に画像をスライドショー形式で表示させるために使いますが、もちろん文章もスライドショー表示させることができます。
画像スライダーだと JQuery を使わない Swiper なんかが有名らしいですが、bxSlider を選んだ理由はとにかく簡単に実装できるからです。
オプションも充実しているので、簡単に自分好みのスライダーを作ることができます。
動作イメージ
See the Pen bxslider by HARU (@haru_yellowfrog) on CodePen.
JQuery の導入
JQuery を導入していない場合、以下の記事を参考に導入してください。
bxSlider 導入
- JQuery の直下に、下記コードを記述する。
<!-- bxSlider -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"/>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
- </body>の直上に下記コードを記述する。
<!-- bxSlider -->
<script>
$(function() {
var slider = $('.bxslider').bxSlider({
});
});
</script>
bxSlider の使い方
ブログ記事本文など、スライダーを利用したいところに、以下のように記述することで利用できます。
<div class="bxslider">
<div><画像ファイル></div>
<div><画像ファイル2></div>
</div>
<!-- ul li を使うことも可 -->
<ul class="bxslider">
<li><画像ファイル></li>
<li><画像ファイル2></li>
</ul>
入れておきたいオプション
ここでは必ず入れておきたいオプションを紹介します。
スライダー画像からのリンク移動ができないのを改善する
bxSlider は画像にリンクが付いている場合、画像をクリックすることでリンク先へ移動することができます。
しかしデスクトップ版 GoogleChrome では、リンク機能がうまく動作しません。
Script で改善する(2021.07.09)
Script を追加するだけでこの問題が解決できる方法です。
以下の Script を</body>の直上に記述します。
<!-- bxSlider リンク移動不具合対応 -->
<script>
$(document).on('mousedown','.bx-viewport a',function(){
var $this = $(this),
myHref = $this.attr('href'),
myTarget = $this.attr('target');
if(myTarget === '_blank'){
window.open(myHref);
}else{
window.location.href = myHref;
}
});
</script>
touchEnabled を無効化する
GoogleChrome でもリンク移動ができるようにする場合、touchEnabledを無効化します。
これはスワイプで画像を切り替えるオプションです。
ただスワイプによる画像切り替えを無効化してしまうと、スマホの操作性は確実に悪くなります。
そこで画面サイズによる有効/無効の切り替えをできるようにしましょう。
<script>
$(window).on('load resize', function(){
var x = $(window).width();
var y = 640;
if (x <= y) {
$('.bxslider').bxSlider({
touchEnabled: true, //スワイプ有効
});
}else{
$('.bxslider').bxSlider({
touchEnabled: false, //スワイプ無効
});
}
});
</script>
上記例では640px以下でスワイプを有効にするようになっています。
オプションをさらに追加する場合、それぞれに追記するようにしてください。
スライダーが動かなくなることを防止する
bxSlider は左右の矢印ボタンをクリック、またはスワイプすることで、コンテンツをスライドさせることができます。
しかし、その大事なスライド動作が動かなくなることが多々あります。これは致命的ですよね。
この不具合についてはuseCSSを無効化することで起こらなくなります。
<!-- bxSlider -->
<script>
$(function() {
var slider = $('.bxslider').bxSlider({
useCSS: false, //アニメーションフリーズ防止
});
});
</script>
もっとカスタマイズしたい
実際の利用例、カスタマイズなどは、別途記事を書こうと思っています。
お待ちください。
0 件のコメント:
コメントを投稿