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

unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示する方法をご紹介します。
個人的には過去に紹介した「複数画像スライダープラグイン【slick.js】」や「複数画像スライダープラグイン【Swiper.js】」の方が、利用数も多く参考サイトも色々あるので良い気がします。

Contents

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

unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示するCSSの記述

※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">

unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示する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>

unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示するJavaScriptの記述

※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>