【jQuery】スムーススクロールを簡単に実装する方法

こんにちは、ハル@haru_elpisです。

jQueryでスライダーを簡単に実装する備忘録です。

スライダーとは

トップページの画像をスライドショーにしたもの、一つのスペースでいろいろな画像を表示することができます。

ダウンロード

jQuery Content 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>