どもです。
以前に掲載したレスポンシブ対応のスライドショーですが、
これにいくつか追加要素と変更点を加味したものを作ってみました。
特徴は以下の通り。
・レスポンシブ対応
・スライドで動く
・画像を並べて表示し、中央のもの以外は半透明になる
・フリックにも対応している
大きめの写真が並ぶカルーセルや、サイトのトップページのプロモ向きかと思われます。
というわけでポン_(: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();
});
個別の動作についてはコメントアウトで囲んであるので、
いらないものを削除・各セレクタの名前を一括置換と数値の入力でおｋです。
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;
}