【jQuery】bxslider マウスオーバーでページャーの画像プレビューを表示する

こんにちは、Ryohei（@ityryohei）です！

bxsliderでページャ上にメインスライドのプレビューを表示するサンプルをご紹介します。

ページャーにカーソルを合わせると画像のプレビューが表示されます。スライド部分に表示される画像を知ることができるため、効果的にスライドを活用することができます。

以下デモになります。

Demo

bxsliderのダウンロードや使い方については以下のページで解説していますので、良ければご覧ください。

bxslider

マウスオーバーされたページャーの画像プレビューを表示する

では解説していきます。

HTML

HTMLではbxsliderの基本的な記述を記載しています。

本家サイトのサンプル等で紹介されているものになります。

<ul class="bxslider">
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
  <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
</ul>

CSS

以下CSSです。

bx-pager-itemにposition:relativeを追加して相対位置とし、その上に画像のプレビューを表示しています。

画像のプレビューはpreviewのclassで設定していますので、環境に応じて調整していただければと思います。

.bx-wrapper {
  width: 720px;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}
.bx-pager-item{
  position: relative;
}
.preview{
  position: absolute;
  top: -232px;
  left: -140px;
  width: 300px;
  height: 195px;
  padding: 5px 5px 10px 5px;
  background: #666;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 30px;
  height: 7px;
  border-radius: 0;
}

JS

以下スクリプトです。

bxsliderではオートプレイとページャーを設定しています。

プレビューの処理では、ページャがマウスオーバーされた際の処理を記述しています。マウスオーバーされたページャーに設定されている画像のパスを取得し、ブロック要素に取得したパスを追加しています。

//bxslider
$(document).ready(function(){
  $('.bxslider').bxSlider({
    speed: 1000,
    auto: true,
    pager: true
  });
});
//プレビューを表示する処理
$(document).ready(function(){
  $(window).on('resize load ', function() {
    $('.bx-pager-link').hover(function() {
      var slideIndex = $(this).data('slideIndex') + 2;
      var elem = '.bxslider li:nth-child(' + slideIndex + ') img';
      var src = $( elem ).attr('src');
      $(this).parent().append('<div class="preview"><img src="' + src + '" alt="サムネイル"></div>');
    }, function() {
      $('.preview').remove();
    });
  });
});

Copy & Paste

以下はデモのコードです。お使いの環境に応じて変更して使用してください。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>bxslider｜Into the Program</title>
  <!-- CSS -->
  <link href="jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
  <!-- JS -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="jquery.bxslider/jquery.bxslider.js"></script>
  <script>
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      speed: 1000,
      auto: true,
      pager: true
    });
  });
  $(document).ready(function(){
    $(window).on('resize load ', function() {
      $('.bx-pager-link').hover(function() {
        var slideIndex = $(this).data('slideIndex') + 2;
        var elem = '.bxslider li:nth-child(' + slideIndex + ') img';
        var src = $( elem ).attr('src');
        $(this).parent().append('<div class="preview"><img src="' + src + '" alt="サムネイル"></div>');
      }, function() {
        $('.preview').remove();
      });
    });
  });
  </script>
  <style>
  html,
  body {
    margin: 0;
    padding: 0;
  }
  header > h1 {
    color: #555;
  }
  section {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    background: #aaa;
  }
  .bx-wrapper {
    width: 720px;
    margin: 0 auto;
    border: none;
    box-shadow: none;
  }
  .bx-pager-item{
    position: relative;
  }
  .preview{
    position: absolute;
    top: -232px;
    left: -140px;
    width: 300px;
    height: 195px;
    padding: 5px 5px 10px 5px;
    background: #666;
  }
  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 30px;
    height: 7px;
    border-radius: 0;
  }
  </style>
</head>
<body>
  <header>
    <h1>Into the Program</h1>
  </header>
  <main>
    <section>
      <ul class="bxslider">
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      </ul>
    </section>
  </main>
</body>
</html>