どもです。
最近ソード・ワールド2.0の大型サプリを買い揃えてしまったので、今度はリプレイを集めようかと画策している餅。です。
今回はWordPressから離れてjQueryの話。
ところで、この記事書くにあたって僕は初めて「カルーセル」という言葉を知りました。
今までスライドショーの一種だと思っていたのでちょっと驚き。
そんでもって、今回作るのはこんな感じのもの。
単に作るだけなら簡単ですが、問題はこのカルーセルを載せるのがレスポンシブサイトだということ。
カルーセル本体のサイズが一定でないということは、終端がどこになるか定かでないということです。
さて、まずはHTML＆CSS。
こんな感じです。
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のサイズ=ページあたりの表示数」です。
そこを押さえればどうとでもなります(・∀・)