どもです。
休日が待ち遠しい餅。です。
今回はjs、というかjQuery。
カルーセルというものについて、今までその都度作ったり改造したりしていましたが
そろそろこれ一つで大体の状況に対応できるんでね？って感じになってきたので
ひとつの完成品として公開。
// JavaScript Document
$(function(){
var productHow = $('カルーセル中身').length; // カルーセルの数
var productno = 1 ; // カルーセルの現在番号
var slidflug = 1 ;
var d = 700 // 画像の幅
var q = productHow * d ; // カルーセルの基準位置（ずれるときは個別調整）
var element = $('カルーセル中身').clone(true) ; // カルーセルを複製
$("カルーセル親").append(element); // cal ul の末尾に複製を挿入
var element = $('カルーセル中身').clone(true) ; // カルーセルを複製
$("カルーセル親").append(element); // cal ul の末尾に複製を挿入（2回やっとく）
setInterval(function() {
if(slidflug === 1 ){
if(productno >= productHow){
productno=1;
}else{
productno++;
}
var p = q + ( ( productno - 2 ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){
p = q + ( ( productno - 1 ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");
});
}else{
slidflug = 1 ;
}
}, 6000); //スライド時間間隔（個別調整）
$("前へボタン").click(function () {
if(productno === 1 ){
productno = productHow;
}else{
productno--;
}
var p = q + ( ( productno ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){
p = q + ( ( productno -1 ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");
});
slidflug = 0 ;
});
$("次へボタン").click(function () {
if(productno >= productHow){
productno=1;
}else{
productno++;
}
var p = q + ( ( productno - 2 ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){
p = q + ( ( productno - 1 ) * d ) ;
$("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");
});
slidflug = 0 ;
});
});
HTMLは、祖父母要素＞親要素＞カルーセル中身と設置。
CSSは、祖父母要素にwidth:カルーセルの幅とoverflow:hidden;。
親要素にwidth:カルーセル合計*4以上。
カルーセルはfloat:leftか、display:inline-block;letter-spacing:-.40em;かそこらで
ぺったり横並べ。