Home
Menu
Side
Twitter
Top
ホーム / Blog | Blogger | ブログカスタマイズ |

Blogger に画像スライダー 【 bxSlider 】 を実装する方法

2021/06/10

Blog Blogger ブログカスタマイズ

ブログなどに簡単に実装できる画像スライダー 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 を導入していない場合、以下の記事を参考に導入してください。

JQuery について

bxSlider 導入

STEP1
  • 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>
STEP2
  • </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 &lt;= y) {
    $('.bxslider').bxSlider({
      touchEnabled: true, //スワイプ有効
    });
  }else{
    $('.bxslider').bxSlider({
      touchEnabled: false, //スワイプ無効
    });
  }
});
</script>

上記例では640px以下でスワイプを有効にするようになっています。

参考

オプションをさらに追加する場合、それぞれに追記するようにしてください。

スライダーが動かなくなることを防止する

bxSlider は左右の矢印ボタンをクリック、またはスワイプすることで、コンテンツをスライドさせることができます。

しかし、その大事なスライド動作が動かなくなることが多々あります。これは致命的ですよね。

参考

この不具合についてはuseCSSを無効化することで起こらなくなります。


<!-- bxSlider -->
<script>
$(function() {
  var slider = $('.bxslider').bxSlider({
    useCSS: false, //アニメーションフリーズ防止
  });
});
</script>

もっとカスタマイズしたい

実際の利用例、カスタマイズなどは、別途記事を書こうと思っています。

お待ちください。

QooQ