JavaScript

簡単実装！lightSlider.jsでスワイプ対応の画像スライドギャラリーを作る完全ガイド

  /

今回は非常に軽量で使いやすいスライダーライブラリである「lightSlider.js」を使った画像スライドギャラリーの実装方法を詳しくご紹介します。
初心者でも扱いやすく、スワイプ対応でスムーズな操作感が得られるため、多くのWebサイトでの利用が期待できます。

Contents

はじめに

現代のWebサイトでは、ビジュアル要素が非常に重要であり、特に画像のスライドショーはユーザーの注目を引くための効果的な手段の一つです。この記事では、lightSlider.jsというJavaScriptのライブラリを使って、複数の画像をスムーズに表示するスライドギャラリーを作成する方法を説明します。lightSlider.jsはそのシンプルさと軽量さで選ばれており、初心者でも容易に扱うことができます。

lightSlider.jsの特徴

  • 軽量:少ないコード量で動作するため、ページの読み込み速度に影響を与えません。
  • シンプルな設定:基本的なHTMLとCSSの知識があれば、簡単に設定とカスタマイズが可能です。
  • レスポンシブ対応:さまざまなデバイスでの表示が最適化されています。
  • スワイプ対応:タッチ操作にも対応しており、スマートフォンやタブレットでの使用が快適です。

CSSをカスタマイズする

lightslider.cssファイルを読み込みます。スライダーの見た目を整えるために、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>

HTMLを記述

画像スライダーを表示するための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>

JavaScriptを設定

jquery-1.11.0.min.js、lightslider.jsファイルを読み込みます。lightSlider.jsを活用して、スライダー機能を実装します。以下のスクリプトをHTMLファイルの適切な場所に配置してください。
$(‘ギャラリー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>

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

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

ソース元：JQuery lightSlider

JQuery lightSlider

まとめ

この記事では、lightSlider.jsを使用して、複数の画像を含むスライドギャラリーを簡単に実装する方法をご紹介しました。このライブラリの軽量性とシンプルさにより、初心者でも簡単に美しい画像スライダーをWebページに導入することができます。さらに、カスタマイズの自由度も高く、自身のプロジェクトに合わせてさまざまな調整が可能です。興味のある方は是非、自分のサイトで試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

lightslider.js 軽量スライダー
関連記事