jQueryによるカルーセルパネルのバグ修正方法
2011年06月8日 18時01分33秒
真面目な記事なので煽りの文句は入れません。
どうも、見習いAです。
jQueryによる、カルーセルパネルを作る際のソースのバグ修正方法を記述したいと思います。
参考サイト：こちらを参照してください。
jQueryを入れて、上記のサイトを参考にすることで、カルーセルパネル(スライドショー？)
が作成できます。
しかし注意点が一点。
画象の数が、1ページに満たない場合、画像が消えてしまうという不具合を抱えています。
これは、現在表示しているものの後ろに、ULタグの最後のものをセットしているため、
ULタグが1つしかない(1ページ以下)の時に不具合が起きてしまうのです。
そこでULタグが1つしかないときは、その処理をさせなければうまく表示されます。
ソースは以下を参照。
$(function(){
$(“#carouselInner”).css(“width”,730*$(“#carouselInner ul.column”).size()+”px”);
if ($(“#carouselInner ul.column”).size() > 1) { // ←これを追加
$(“#carouselInner ul.column:last”).prependTo(“#carouselInner”);
$(“#carouselInner”).css(“margin-left”,”-730px”)
$(“#carouselPrev”).click(function(){
$(“#carouselNext,#carouselPrev”).hide();
$(“#carouselInner”).animate({
marginLeft : parseInt($(“#carouselInner”).css(“margin-left”))+730+”px”},”slow”,”swing” ,
function(){
$(“#carouselInner”).css(“margin-left”,”-730px”)
$(“#carouselInner ul.column:last”).prependTo(“#carouselInner”);
$(“#carouselNext,#carouselPrev”).show();
})
})
$(“#carouselNext”).click(function(){
$(“#carouselNext,#carouselPrev”).hide();
$(“#carouselInner”).animate({
marginLeft : parseInt($(“#carouselInner”).css(“margin-left”))-730+”px”
},”slow”,”swing” ,
function(){
$(“#carouselInner”).css(“margin-left”,”-730px”)
$(“#carouselInner ul.column:first”).appendTo(“#carouselInner”);
$(“#carouselNext,#carouselPrev”).show();
})
})
} // ←これを追加
})
上記のソースに変更することで、1ページでも問題なく表示されるようになります。
ちなみに、1ページ以下の時は、次や前へのボタンも無効化してあります。
カルーセルパネル(スライドショー？)をつくられる方は参考にしてみてください。
ではまた。
最近のコメント