スライドにアイコンを入れる【slider pro(jquery) – 利用】

今回は【slider pro】を利用して、スライドショーの中にアイコンを入れてみます。

サンプルはブラウザ幅に応じて、スライドの比率を一定に保ち拡大・縮小します(slider-proの基本機能)。

今回のものは、スライドの右下にあるアイコンもブラウザ幅に応じて、比率を保ったまま拡大・縮小するようになっています。

<html>

<!DOCTYPE html>
<meta charset="utf-8">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <linK rel="stylesheet" href="css/slider-pro.min.css"></linK>
  </head>
  <body>
    <!--header-->
    <header></header>
    <main>
      <div class="backgroundBox">
        <div class="Container">
          <nav class="slider-pro" id="slider-pro">
            <ul class="sp-slides">
              <li class="sp-slide"><img class="sp-image" src="images/slidertest/slide1.png"></li>
              <li class="sp-slide"><img class="sp-image" src="images/slidertest/slide2.png"></li>
            </ul>
            <div class="flame"></div>
          </nav>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
      <script src="js/jquery.sliderPro.min.js"></script>
    </footer>
  </body>
</html>

<ポイント>

・navタグを親要素として、slider-proを適用するためにidとclassを命名します。

・slider-proを適用するnavタグの中に、スライドショーにアイコンを入れるためのdivタグを追加します。

<css>

※index.cssの中身

* {
  margin: 0;
  padding: 0; }

img {
  max-width: 100%; }

.backgroundBox {
  background-color: whitesmoke; }

.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px; }

.flame {
  background-image: url(../images/slidertest/slideIcon.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 550px;
  position: absolute;
  z-index: 100;
  pointer-events: none; }

.sp-slide {
  list-style: none; }

<ポイント>

・.flameが重要。

①slider-proにより、navタグにposition:relative;が適用されるため、flameタグにposition:absolute;を指定することで、divタグを左上にもってこれる。

②スライダーに使用する画像と同じ大きさにdivを定義

③divタグの背景に、スライドと同じ大きさの画像を適用する(今回でいえば、横幅800px、縦550pxで右下にアイコン入りの画像)

④z-indexにより、スライドの上にdivを持ってっくる

⑤divタグの下にスライドがあるので、スライド操作を可能にするために、pointer-events:none;を適用

<js>

$(function(){
     $('#slider-pro').sliderPro({
         width: 800,
         height: 550,
         loop: true,
         arrows: false,//左右の矢印
         autoSlideSize: true,
         buttons: true,
         slideDistance:0,//スライド同士の距離
     });
});

<ポイント>

・スライドに使用する画像の大きさ横800px、縦550px

slider-proの基本仕様を利用して、スライドの上にアイコン入りの画像を挿入して実現しました。もっと、スマートなやり方があるとは思いますが、ご参考にしていただければ幸いです。

以上。

jsを利用すれば、もっとかっこよい書き方あるんだろうな～