unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示する方法｜DAD UNION

unslider.jsは、シンプルで柔軟性の高いjQueryコンテンツスライダーを簡単に実装できるライブラリです。
この記事では、unslider.jsの使い方を具体的なコード例を交えて説明します。
過去に紹介した「slick.js」や「Swiper.js」は、豊富な機能と参考サイトが多いことで人気ですが、unslider.jsはそのシンプルさから初心者にもおすすめできるツールです。

Contents

unslider.jsの特徴
CSSの記述
HTMLの記述
JavaScriptの記述
unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示するデモページ
ソース元：Unslider — the super-tiny jQuery slider
まとめ

unslider.jsの特徴

unslider.jsの主な特徴は以下の通りです：

軽量で高速な動作
シンプルなAPIで設定が簡単
カスタマイズ可能なデザイン
レスポンシブデザイン対応

これらの特徴を活かすことで、スライダーを簡単に導入し、サイトの魅力を高めることができます。

CSSの記述

unslider.jsを使用するためには、基本的なスタイリングが必要です。以下はサンプルコードです。
unslider.css、unslider-dots.cssファイルを読み込みます。スライドエリア（.banner）のCSS記述です。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.banner{
  overflow: hidden;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}
.banner {
  position: relative;
  overflow: auto;
}
.banner ul li{
  list-style: none;
  position: relative;
  float: left;  
  width: 400px;
  height: 400px;
}
.banner ul li div{
  position: absolute;
  bottom: 5px;
  text-align: center;
  width: 100%;
}
</style>
<link rel="stylesheet" href="./unslider.css">
<link rel="stylesheet" href="./unslider-dots.css">

HTMLの記述

以下はunslider.jsでスライダーを表示するためのHTMLの例です。
スライド表示させるサムネイル（1～4.jpg）を用意します。スライダーの内容に応じて自由に変更できます。

<h1>unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダー<br>「Prev」「Next」をクリックすると左右にスライドします。</h1>

<div class="banner">
    <ul>
        <li style="background-image: url('1.jpg');">
          <div>スライド1</div>
        </li>
        <li style="background-image: url('2.jpg');">
          <div>スライド2</div>
        </li>
        <li style="background-image: url('3.jpg');">
          <div>スライド3</div>
        </li>
        <li style="background-image: url('4.jpg');">
          <div>スライド4</div>
        </li>
    </ul>
</div>

JavaScriptの記述

unslider.jsを動作させるためには、jQueryライブラリとunslider.jsを読み込む必要があります。以下はその基本的なコード例です。
jquery-2.1.4.min.js、unslider.jsファイルを読み込みます。$(‘スライドエリア’).unslider({オプション})を記述します。オプションでは自動スライドや「Prev」「Next」等の設定が可能です。

    <script src="jquery-2.1.4.min.js"></script>
    <script src="unslider.js"></script>
    <script>
      $('.banner').unslider({
        autoplay: true
      });
    </script>