ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

ホーム > コミュニティ > PC、インターネット > MT備忘録 > トピック一覧 > 【JQuery】 bxスライダ...

MT備忘録コミュの【JQuery】 bxスライダー(ver.4)用 まき戻し型永久ループ

  • mixiチェック
  • このエントリーをはてなブックマークに追加

コミュ内全体

MTとは全く関係ないんですが、MTの仕事で
1. bxスライダーを使用
2. 永久ループではなく、スライダーの最後まで行ったら、1枚目までまき戻ってオートスライド
3. 次へ 前へ ページャー等を押した時にスライダーが動かなくなるバグ(?)対応

3は正直付ける必要はなかったんですが、「2.」を実装する際にこれも付けておかないと
次へ 等を押してスライダーの最後に到達した際に勝手に1番目にスライドしてしまうので(笑)
それをごまかす(?)ために無理やりつけました。
で、結論はこんな感じ

<script>
$(document).ready(function(){
obj = $('.bxslider').bxSlider({
pager: true,
auto: true,
pause: 4000,
infiniteLoop: false,
onSliderLoad: function () {
timeout_id = setTimeout(null , 10000);
},
onSlideBefore: function () {
clearTimeout(timeout_id);
},
onSlideAfter: function () {
var current = obj.getCurrentSlide();
var slideQty = obj.getSlideCount() - 1;
if(current == slideQty){
timeout_id = setTimeout("obj.goToSlide(0)", 4000);
}else{
obj.startAuto();
}
},
hideControlOnEnd: true
});
});
</script>

その用途によって細かい設定は必要ですけど、基本、このままコピペしたら
ちゃんと動くと思います(ご使用は自己責任で。動かないと文句言われても責任は取りません)。
細かい説明は、気が向いたらまた付け足します。(今は時間がない)

ただ。↑と同じ動きはFlexSliderとか使ったら、こんな苦労もなしに使えるので
正直言って「マゾ向き」です。どうしてもbxスライダーしか使えないような状況下でご活用下さいませ。

コメント(1)

投稿時にインデントが全部消えた(´Д` ) このままじゃ見にくいですが、ドンマイorz

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

MT備忘録 更新情報

MT備忘録のメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。