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

レスポンシブに対応したカルーセル(スライドショー)ver2

Web > javascript 2015年11月26日(最終更新:1年前)

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

どもです。

以前に掲載したレスポンシブ対応のスライドショーですが、
これにいくつか追加要素と変更点を加味したものを作ってみました。

特徴は以下の通り。
・レスポンシブ対応
・スライドで動く
・画像を並べて表示し、中央のもの以外は半透明になる
・フリックにも対応している

大きめの写真が並ぶカルーセルや、サイトのトップページのプロモ向きかと思われます。

というわけでポン_(:3」∠)_

// JavaScript Document
$(window).load(function(){
  
    var productHow = $('スライド単体(li)').length;    // スライドの数
    var productno = 1 ;     // スライドの現在番号
    var slidflug = 1 ;
	var productVisible = productno + productHow;
 
    var w = 0; //ウィンドウサイズ
    var d = 0; //スライド単体(li)のサイズ
    var p = 0; //スライドの基準位置
    var q = 0; //スライドの次回移動先

	var startX = 0;	//フリック開始地点
    var endX = 0;	//フリック終了地点
    var diffX = 0;	//フリック距離
	
	var size = $('スライド単体(li):first-of-type img').width() //liのサイズ
	if( size > $('スライド祖父母要素またはその親要素').width() ){
		size = $('スライド祖父母要素またはその親要素').width();
	}

//レスポンシブサイズ調整
function windowSize(){
    w = $('スライド祖父母要素またはその親要素').width(); //祖父母要素を取得

	//サイズ調整
    if( w < size ){ //ウィンドウサイズが画像サイズより小さいとき…
		d = $('html').width(); //スライド単体(li)のサイズをウィンドウサイズと同じに
	}else{ //ウィンドウサイズが切り替えサイズ以上のとき
		d = size ; //スライドの中身サイズは指定のサイズに
	}
    $('スライド単体(li)').css({"width":d+"px"}); //先のifの結果を反映
	
	//基準位置の調整(中央に)
	if( w < size ){ 
		q = productHow * d
	}else{
		q = productHow * d - ( ( w - size ) / 2 )
	}
	
    p = q + ( ( productno - 1 ) * d ) ; //サイズ変更後の現在のスライドの位置を算出し、移動先に代入
    $("スライド祖父母要素").animate({scrollLeft:p}, 1, "swing"); //算出した現在のスライド位置を適用
}

//指定方向への移動
function left(){
    if(productno >= productHow){
        productno=1;
    }else{
        productno++;
    }
    p = q + ( ( productno -2 ) * d ) ; //1つ前の位置を代入
    slide();
}
function right(){
    if(productno == 1){
        productno=productHow;
    }else{
        productno--;
    }
    p = q + ( ( productno ) * d ) ; //1つ前の位置を代入
    slide();
}

//中央以外の透過処理
function opacity(){
	productVisible = productno + productHow;
	$('スライド単体(li):nth-of-type('+ productVisible +') img').css({"opacity":"1"});
	$('スライド単体(li):not(:nth-of-type('+ productVisible +')) img').css({"opacity":"0.6"});
}

function slide(){
	opacity();
    $("スライド祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){ //スライド1つ前に移動
        p =  q + ( ( productno - 1 ) * d ) ; //移動先の位置を代入
        $("スライド祖父母要素").animate({scrollLeft:p}, 1000, "swing"); //代入した位置にスライド
    });
}

if(productHow>1){

//矢印を表示	
$("矢印").css( "display", "block" );

//無限ループのための複製処理
var element = $('スライド単体(li)').clone(true) ; // スライドを複製
$("スライド親要素(ul)").append(element); // cal ul の末尾に複製を挿入
var element = $('スライド単体(li)').clone(true) ;
$("スライド親要素(ul)").append(element); // cal ul の末尾に複製を挿入(2回やっとく)


/* 一定時間が経過したときのリアクション *************************************************************************************************/
setInterval(function() {
if(slidflug === 1 ){
	left();
}else{
    slidflug = 1 ;
}
}, 6000); //スライド時間間隔(個別調整)
/************************************************************************************************* 一定時間が経過したときのリアクション */

/* 左右の矢印を押したときのリアクション *************************************************************************************************/
$("矢印(左向き)").click(function () {
	right();
	slidflug = 0 ;
});
$("矢印(右向き)").click(function () {
	left();
	slidflug = 0 ;
});
/************************************************************************************************* 左右の矢印を押したときのリアクション */

/* フリック時のリアクション *************************************************************************************************/
$('スライド親要素(ul)').bind('touchstart', function() {
    startX = event.changedTouches[0].pageX;//フリック開始時のX軸の座標
});
$('スライド親要素(ul)').bind('touchmove', function(e) {
    endX = event.changedTouches[0].pageX;//フリック終了時のX軸の座標
    diffX = Math.round(startX - endX);//フリック開始時の座標-終了時の座標=フリックの移動距離
});
$('スライド親要素(ul)').bind('touchend', function(e) {
if (diffX > 100) {
	left();
	slidflug = 0 ;
} else if (diffX < -100) {
	right();
	slidflug = 0 ;
};
});
/************************************************************************************************* フリック時のリアクション */

opacity();
$('スライド単体(li) img').css({"transition":".5s"});
 
}else{

$("スライド親要素(ul)").css( "width", "100%" );
$("スライド単体(li)").css({"float":"none","margin":"0 auto"});

}

$(window).resize(function(){ 
windowSize();
});
 
windowSize();

});

個別の動作についてはコメントアウトで囲んであるので、
いらないものを削除・各セレクタの名前を一括置換と数値の入力でおkです。

CSSについてはこんな感じ。

スライド祖父母要素{
	width:100%;
	overflow:hidden;
	}
スライド親要素(ul){
	width:20000px;(スライド中身全ての幅*4以上)
	max-width:none;
	}
スライド単体(li){
	float:left;
	text-align:center;
	opacity:1;
	}
スライド単体(li) img{
	transition:0s;
	}
スライド親要素(ul):after{
	content:"";
	display:block;
	clear:both;
	}
矢印{
	display:none;
	}
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)