unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示する方法をご紹介します。
個人的には過去に紹介した「複数画像スライダープラグイン【slick.js】」や「複数画像スライダープラグイン【Swiper.js】」の方が、利用数も多く参考サイトも色々あるので良い気がします。
Contents
ディスプレイ広告
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>
unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示するデモページ
unslider.jsを使ってクリーンで柔軟なjQueryコンテンツスライダーを表示するデモページ
ソース元:Unslider — the super-tiny jQuery slider
以下がソース元です。
Unslider — the super-tiny jQuery slider
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。