ど素人から毛を生やす。<延>

jQueryでカルーセル作るお

Web > javascript 2014年1月21日(最終更新:3年前)

このページは2014.1.21に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
最近ソード・ワールド2.0の大型サプリを買い揃えてしまったので、今度はリプレイを集めようかと画策している餅。です。

今回はWordPressから離れてjQueryの話。
ところで、この記事書くにあたって僕は初めて「カルーセル」という言葉を知りました。
今までスライドショーの一種だと思っていたのでちょっと驚き。

そんでもって、今回作るのはこんな感じのもの。

h260121_1

単に作るだけなら簡単ですが、問題はこのカルーセルを載せるのがレスポンシブサイトだということ。

カルーセル本体のサイズが一定でないということは、終端がどこになるか定かでないということです。

さて、まずはHTML&CSS。
こんな感じです。

h260121_3

ulをものすごく大きな数値に設定します。
そして親要素をoverflow:hiddenにし、ulを覆います。

で、肝心のjQueryはこうなります。
以下はliの幅を170px、左右の余白を110pxとしたときです。

var carouselHow = 5 ;  // liの数(可変部)
var carousel = 1 ;     // スライドの現在位置

// 前へ送る
$(function(){
$(".前へボタン").click(function(){
		var w = $(window).width();
		var m = Math.floor((w-110)/170);
           if(carousel === 1){
				var p = (carouselHow-m)*170;
				$("ulの親").animate({scrollLeft:p}, 500, "swing");
				carousel=carouselHow;
			   }else{
				var p = 170*carousel-340;
				$(".ulの親").animate({scrollLeft:p}, 200, "swing");
				carousel--;
				   }
} );
});

// 次へ送る
$(function(){
$(".次へボタン").click(function(){
		var w = $(window).width();
		var m = (w-110)/170;
           if(carousel >= carouselHow-m+1){
				$(".ulの親").animate({scrollLeft:0}, 500, "swing");
				carousel=1;
			   }else{
				var p = 170*carousel;
				$(".ulの親").animate({scrollLeft:p}, 200, "swing");
				carousel++;
				   }
} );
});

仕組みとしては、ボタンを押された瞬間の画面サイズを取得し、「(画面サイズ-余白)/liのサイズ」でページあたりの表示数を取得。

で、liの数を取得してそれを元に計算。jQueryのアニメーションを使ってhtmlをスクロールさせます。

取り敢えずポイントは「$(window).width();」と、
「(画面サイズ-余白)/liのサイズ=ページあたりの表示数」です。

そこを押さえればどうとでもなります(・∀・)

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)