さまざまな動きをする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スライダーを作ってみた