軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像スライドギャラリーを表示する方法｜DAD UNION

軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示する方法をご紹介します。スライダー系プラグインは色々あるので決め手は軽量でシンプルなものにした方が良いかもしれないです。

Contents

軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するCSS記述
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するHTML記述
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するJavaScriptの記述
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像スライドギャラリーを表示するデモページ
ソース元：JQuery lightSlider

軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するCSS記述

※lightslider.cssファイルを読み込みます。スライドエリア内（.demo）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet"  href="lightslider.css"/>
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
  width:100%;
  margin:0px;
  padding:0px;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 0 0;
}
ul{
  list-style: none outside none;
  padding-left: 0;
  margin: 0;
}
.content-slider li{
  background-color: #666666;
  text-align: center;
  color: #FFF;
}
.content-slider h3 {
  font-size: 20px;
  margin: 0;
  padding: 70px 0;
}
.demo{
  width: 600px;
  margin: 0 auto
}
.demo ul li img{
  width: 100%;
}
.lSAction > a {
  background-image: url(controls.png);
}
</style>

軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するHTML記述

※メイン画像とサムネイルのスライドギャラリー（id=”image-gallery”）と横一列の画像スライダー（id=”content-slider”）を用意しました。

<h1>軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像スライドギャラリーを表示します。<br>マウスをドラッグしながら左右にスライドさせてみてください。</h1>

<div class="demo">
  <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
    <li data-thumb="1.jpg">
      <img src="1.jpg" />
    </li>
    <li data-thumb="2.jpg">
      <img src="2.jpg" />
    </li>
    <li data-thumb="3.jpg">
      <img src="3.jpg" />
    </li>
    <li data-thumb="4.jpg">
      <img src="4.jpg" />
    </li>
    <li data-thumb="5.jpg">
      <img src="5.jpg" />
    </li>
    <li data-thumb="6.jpg">
      <img src="6.jpg" />
    </li>
    <li data-thumb="7.jpg">
      <img src="7.jpg" />
    </li>
    <li data-thumb="8.jpg">
      <img src="8.jpg" />
    </li>
  </ul>

<br>
<br>

  <ul id="content-slider" class="content-slider">
    <li>
      <h3>1</h3>
    </li>
    <li>
      <h3>2</h3>
    </li>
    <li>
      <h3>3</h3>
    </li>
    <li>
      <h3>4</h3>
    </li>
    <li>
      <h3>5</h3>
    </li>
    <li>
      <h3>6</h3>
    </li>
  </ul>
</div>

軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するJavaScriptの記述

※jquery-1.11.0.min.js、lightslider.jsファイルを読み込みます。$(‘ギャラリーorスライダーエリア’).lightSlider({オプション})を記述します。オプションにはギャラリー表示の有無、無限ループ、自動スライド等を設定可能です。

<script src="jquery-1.11.0.min.js"></script>
<script src="lightslider.js"></script> 
<script>
$(document).ready(function() {
  //メイン画像とサムネイルのスライドギャラリー
  $('#image-gallery').lightSlider({
    gallery:true,
    item:1,
    thumbItem:8,
    slideMargin: 0,
    speed:500,
    auto:true,
    loop:true,
    onSliderLoad: function() {
      $('#image-gallery').removeClass('cS-hidden');
    }  
  });

  //横一列の画像スライダー
  $("#content-slider").lightSlider({
    loop:true,
    keyPress:true
  });
});
</script>