さまざまな動きをするjQueryスライダーを作ってみた

jQueryの勉強のために昔作ったスライダーです。
そのころはまだレスポンシブとかあまりなかったので、デスクトップ表示しかありません。

スライドのパターン

よく使う配布されているスライダーを見ると画像の動き方が何種類かあるので、今回は6種類作ってみました。

デモ

デモ

HTML

<div id="slide01">
  <ul>
    <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img02.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img03.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img04.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img05.gif" width="700" height="426" alt=""></a></li>
  </ul>
</div>

CSS

デモからスライドに関係する箇所

.sliders {
  position: relative;
}

.sliders li {
  overflow: hidden;
  list-style-type: none;
}

.sliders li a img {
  border: 0;
}

.pager {
  padding: 10px 0;
  text-align: center;
}

.pager li {
  display: inline-block;
  *display: inline!important;
  list-style-type: none;
  zoom: 1;
 }

.pager a {
  margin: 0 5px;
  display: block;
  width: 10px;
  height: 10px;
  background: url(img/pager_off.png) no-repeat left top;
  text-decoration: none;
  text-indent: -9999px;
  outline: none;
}

.pager a:hover,
.pager .current a {
  color: red;
  text-decoration: none;
  background: url(img/pager_on.png) no-repeat left top;
}

.prev {
  margin-top: -25px;
  margin-left: -450px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(img/prev_off.png) no-repeat left top;
  text-indent: -9999px;
  z-index: 50;
  cursor: pointer;
}

.prev:hover {
  background-image: url(img/prev_on.png);
}

.next {
  margin-top: -25px;
  margin-left: 400px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(img/next_off.png) no-repeat left top;
  text-indent: -9999px;
  z-index: 50;
  cursor: pointer;
}

.next:hover {
  background-image: url(img/next_on.png);
}

JavaScript

$(function(){
  $("#slide01").sliders();
});

オプション

スライドの種類等ｊはオプションで設定できます。

$(function(){
  $("#slide01").sliders({
    slideType:'selectAnimation',
    changeTime: 1500,
    showTime: 3000,
    allTime: 15000,
    animeType: 'linear'
  });
});

• slideType スライドのタイプ。以下から選んで下さい。
  • fadeSlide　フェードイン
  • leftSlide　左にスライド（終わりまで行くと左へ戻る）デフォルト
  • leftSlideLoop　左にスライド（ループ）
  • leftSlideAnimation　常に左にスライド（ループ）
  • selectAnimation　左にスライド（前へ次への選択ボタンあり）
  • moveOn　現在表示されているものの上に右からスライド
• changeTime 次のスライドまでの移動秒数。デフォルトは1500
• showTime 表示秒数デフォルトは3000
• allTime leftSlideAnimation用・常に左にスライド（ループ）専用の全体にかかる秒数。デフォルトは15000。
• animeType アニメーションタイプ。デフォルトはswing。jquery.easing.jsを読みこめばそちらの値も使えます。

スライダーはbxSliderなど配布されていたものを使っていたのですが、やはり自作できるといろいろ改造もできて楽しいです。

転載元

さまざまな動きをするjQueryスライダーを作ってみた