こんにちは、ハル@haru_elpisです。
jQueryでスライダーを簡単に実装する備忘録です。
目次
スライダーとは
トップページの画像をスライドショーにしたもの、一つのスペースでいろいろな画像を表示することができます。
ダウンロード
あわせて読みたい
jQuery Slider | Responsive jQuery Slider | bxSlider
Add a respsonsive image slider to any website.
フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxslider.min.js］とスタイルシートの「jquery.bxslider.css」の２つ。
head
<head> <link rel="stylesheet" href="css/jquery.bxslider.css"> </head>
jQuery
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><!-- 必須 --> <script src="js/jquery.bxslider.min.js"></script> </body> </html>
CSS
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* 環境に合わせて変更（この他にも数箇所あるのでそれらも変更） */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(../images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
HTML
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
[affi id=23]