jQuery

ダイナミック感Good! 画面幅いっぱいのコンテンツスライダー

slider-wide

今回は、画面幅いっぱいのダイナミックなスライド表示が出来る、コンテンツスライダーの使い方のご紹介です。

利用するスライダーなんですが、作者様が日本人の方などで、ご自身のサイトでも詳しく説明もしてありますし、サンプルファイルのダウンロードも下記リンク先より出来ます。

こちらのスライダーは、レスポンシブ対応・スピード調整・自動スライド・フリックオプション設定も可能です。
また、デフォルトではページネーションは、CSSで装飾されていますが、カスタマイズすれば、サムネイル表示も可能です。
その辺の、カスタマイズ方法も今回は、ご紹介したいと思います。

実際にFullWide Sliderを実装したデモサイトもご用意しましたので、ご参考頂ければと思います。

デモサイト

実際にデモサイトで使用した感想ですが、シンプルで使いやすいなーという印象を受けました。
HTML・CSS側でも複雑なコードを記述する必要もなく、シンプルなコードで済みますので実装にあたって楽ですねwww
また、メディアクエリなどを使わなくともレスポンシブに対応していますので、その辺もありがたいです。

意外とこのスライダーが使われているネットショップやWebサイトも見ますし、僕的にストックしておきたいコンテンツスライダーの一つですね。

FullWide Slider 使い方

それでは、実際に【FullWide Slider】の使い方を説明していきたいと思います。

スクリプトファイルの保存

今回JavaScriptを直接HTML側に記述してもいいのですが、少し長いですので、JSファイルとして読み込むために、下記実行スクリプトを名前は何でもいいので、コピーしてjsファイルとして保存します。
スクリプトの幅・高さ・スピードの指定等は、後ほど説明致します。
今回僕は、【wideslider.js】でjsファイルを保存しています。

$(function(){
	$setElm = $('.wideslider'); //スライドの対象となる要素名
	baseWidth = 960; //スライドさせるコンテンツの幅
	baseHeight = 640; //スライドさせるコンテンツ高さ
	minWidth = 320; //コンテンツ要素の最小幅
	slideSpeed = 1500; //アニメーションスピード
	delayTime = 5000; //アニメーション待機時間
	easing = 'easeOutBack'; //イージング効果
	autoPlay = '1'; // 自動スライドON/OFF (ON=1,OFF=0)
	flickMove = '1'; // フリック動作ON/OFF (ON=1,OFF=0)
	btnOpacity = 0.5; //左右のNEXT/BACKの透過
	pnOpacity = 0.5; //ページネーションの透過

	ua = navigator.userAgent;

	$(window).load(function(){
		$setElm.find('img').css({display:'block'});
		$setElm.each(function(){
			targetObj = $(this);
			targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');

			var findBase = targetObj.find('.wideslider_base'),
			findWrap = targetObj.find('.wideslider_wrap'),
			findPrev = targetObj.find('.slider_prev'),
			findNext = targetObj.find('.slider_next');

			var pagination = $('<div class="pagination"></div>');
			targetObj.append(pagination);

			var baseList = findWrap.find('li'),
			baseListLink = findWrap.find('li').children('a'),
			baseListCount = findWrap.find('li').length;

			baseList.each(function(i){
				$(this).css({width:(baseWidth),height:(baseHeight)});
				pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
			});

			var findPagi = targetObj.find('.pagination');

			setSlide();
			function setSlide(){
				windowWidth = $(window).width();
				findList = findWrap.find('li');
				setParts = (findBase,findWrap,findPrev,findNext,$setElm);

				setWrapLeft = parseInt(findWrap.css('left'));
				setlistWidth = findList.find('img').width();
				setLeft = setWrapLeft / setlistWidth;

				if(windowWidth < baseWidth){
					if(windowWidth > minWidth){
						findList.css({width:(windowWidth)});
						var reImgHeight = findList.find('img').height();
						findList.css({height:(reImgHeight)});
						setParts.css({height:(reImgHeight)});
					} else if(windowWidth <= minWidth){
						findList.css({width:(minWidth)});
						var reImgHeight = findList.find('img').height();
						findList.css({height:(reImgHeight)});
						setParts.css({height:(reImgHeight)});
					}
				} else if(windowWidth >= baseWidth){
					findList.css({width:(baseWidth),height:(baseHeight)});
					setParts.css({height:(baseHeight)});
				}

				setWidth = findList.find('img').width();
				setHeight = findList.find('img').height();
				baseWrapWidth = (setWidth)*(baseListCount);

				ulCount = findWrap.find('ul').length;
				if(ulCount == 1){
					var makeClone = findWrap.children('ul');
					makeClone.clone().prependTo(findWrap);
					makeClone.clone().appendTo(findWrap);
					findWrap.children('ul').eq('1').addClass('mainList');
					var mainList = findWrap.find('.mainList').children('li');
					mainList.eq('0').addClass('mainActive')

					allListCount = findWrap.find('li').length;
				}
				allLWrapWidth = (setWidth)*(allListCount),
				posAdjust = ((windowWidth)-(setWidth))/2;

				findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)});
				findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
				findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});

				findWrap.css({width:(allLWrapWidth),height:(setHeight)});
				findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)});

				posResetNext = -(baseWrapWidth)*2,
				posResetPrev = -(baseWrapWidth)+(setWidth);

				adjLeft = setWidth * setLeft;
				findWrap.css({left:(adjLeft)});

			}
			findWrap.css({left:-(baseWrapWidth)});

			var pnPoint = pagination.children('a'),
			pnFirst = pagination.children('a:first'),
			pnLast = pagination.children('a:last'),
			pnCount = pagination.children('a').length;

			if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
				pnPoint.css({opacity:(pnOpacity)});
			} else {
				pnPoint.css({opacity:(pnOpacity)}).hover(function(){
					$(this).stop().animate({opacity:'1'},300);
				}, function(){
					$(this).stop().animate({opacity:(pnOpacity)},300);
				});
			}

			pnFirst.addClass('active');
			pnPoint.click(function(){
				if(autoPlay == '1'){clearInterval(wsSetTimer);}
				var setNum = pnPoint.index(this),
				moveLeft = ((setWidth)*(setNum))+baseWrapWidth;
				findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
				pnPoint.removeClass('active');
				$(this).addClass('active');
				activePos();
				if(autoPlay == '1'){wsTimer();}
			});

			if(autoPlay == '1'){wsTimer();}

			function wsTimer(){
				wsSetTimer = setInterval(function(){
					findNext.click();
				},delayTime);
			}
			findNext.click(function(){
				findWrap.not(':animated').each(function(){
					if(autoPlay == '1'){clearInterval(wsSetTimer);}
					var posLeft = parseInt($(findWrap).css('left')),
					moveLeft = ((posLeft)-(setWidth));
					findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
						var adjustLeft = parseInt($(findWrap).css('left'));
						if(adjustLeft <= posResetNext){
							findWrap.css({left: -(baseWrapWidth)});
						}
					});

					var pnPointActive = pagination.children('a.active');
					pnPointActive.each(function(){
						var pnIndex = pnPoint.index(this),
						listCount = pnIndex+1;
						if(pnCount == listCount){
							pnPointActive.removeClass('active');
							pnFirst.addClass('active');
						} else {
							pnPointActive.removeClass('active').next().addClass('active');
						}
					});
					activePos();

					if(autoPlay == '1'){wsTimer();}
				});
			}).hover(function(){
				$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
			}, function(){
				$(this).stop().animate({opacity:(btnOpacity)},100);
			});

			findPrev.click(function(){
				findWrap.not(':animated').each(function(){
					if(autoPlay == '1'){clearInterval(wsSetTimer);}

					var posLeft = parseInt($(findWrap).css('left')),
					moveLeft = ((posLeft)+(setWidth));
					findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
						var adjustLeft = parseInt($(findWrap).css('left')),
						adjustLeftPrev = (posResetNext)+(setWidth);
						if(adjustLeft >= posResetPrev){
							findWrap.css({left: (adjustLeftPrev)});
						}
					});

					var pnPointActive = pagination.children('a.active');
					pnPointActive.each(function(){
						var pnIndex = pnPoint.index(this),
						listCount = pnIndex+1;
						if(1 == listCount){
							pnPointActive.removeClass('active');
							pnLast.addClass('active');
						} else {
							pnPointActive.removeClass('active').prev().addClass('active');
						}
					});
					activePos();

					if(autoPlay == '1'){wsTimer();}
				});
			}).hover(function(){
				$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
			}, function(){
				$(this).stop().animate({opacity:(btnOpacity)},100);
			});

			function activePos(){
				var posActive = findPagi.find('a.active');
				posActive.each(function(){
					var posIndex = pnPoint.index(this),
					setMainList = findWrap.find('.mainList').children('li');
					setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive');
				});
			}

			$(window).on('resize',function(){
				if(autoPlay == '1'){clearInterval(wsSetTimer);}
				setSlide();
				if(autoPlay == '1'){wsTimer();}
			}).resize();

			if(flickMove == '1'){
				var isTouch = ('ontouchstart' in window);
				findWrap.on(
					{'touchstart mousedown': function(e){
						if(findWrap.is(':animated')){
							e.preventDefault();
						} else {
							if(autoPlay == '1'){clearInterval(wsSetTimer);}
							if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){
								e.preventDefault();
							}
							this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
							this.leftBegin = parseInt($(this).css('left'));
							this.left = parseInt($(this).css('left'));
							this.touched = true;
						}
					},'touchmove mousemove': function(e){
						if(!this.touched){return;}
						e.preventDefault();
						this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
						this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
						$(this).css({left:this.left});
					},'touchend mouseup mouseout': function(e){
						if (!this.touched) {return;}
						this.touched = false;

						var setThumbLiActive = pagination.children('a.active'),
						listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1));

						if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
							$(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){
								var adjustLeft = parseInt($(findWrap).css('left'));
								if(adjustLeft <= posResetNext){
									findWrap.css({left: -(baseWrapWidth)});
								}
							});

							setThumbLiActive.each(function(){
								var pnIndex = pnPoint.index(this),
								listCount = pnIndex+1;
								if(pnCount == listCount){
									setThumbLiActive.removeClass('active');
									pnFirst.addClass('active');
								} else {
									setThumbLiActive.removeClass('active').next().addClass('active');
								}
							});
							activePos();
						} else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
							$(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){
								var adjustLeft = parseInt($(findWrap).css('left')),
								adjustLeftPrev = (posResetNext)+(setWidth);
								if(adjustLeft >= posResetPrev){
									findWrap.css({left: (adjustLeftPrev)});
								}
							});
							setThumbLiActive.each(function(){
								var pnIndex = pnPoint.index(this),
								listCount = pnIndex+1;
								if(1 == listCount){
									setThumbLiActive.removeClass('active');
									pnLast.addClass('active');
								} else {
									setThumbLiActive.removeClass('active').prev().addClass('active');
								}
							});
							activePos();
						} else {
							$(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing);
						}
						compBeginLeft = this.leftBegin;
						compThisLeft = this.left;
						baseListLink.click(function(e){
							if(!(compBeginLeft == compThisLeft)){
								e.preventDefault();
							}
						});
						if(autoPlay == '1'){wsTimer();}
					}
				});
			}
			setTimeout(function(){setSlide();},500);
		});
	});
});

必要ファイルの読み込み

次に、今回利用するコンテンツスライダーに必要なファイルを読み込みたいと思います。
今回は、イージングも利用したいので、jQuery本体とjquery.easingをCDNで読み込み先ほど保存したjSファイルを読みこんでいます。
jSファイルの階層に関しては、ご自身の環境に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/wideslider.js"></script>

HTML

次にHTMLの記述をしていきます。
スライダーを表示させたい場所に下記のコードを貼り付けて下さい。
img要素の階層もご自身の環境に合わせて変更して下さい。

<div class="wideslider">
	  <ul>
		  <li><a href="#1"><img src="img/img-01.jpg"></a></li>
		  <li><a href="#2"><img src="img/img-02.jpg"></a></li>
		  <li><a href="#3"><img src="img/img-03.jpg"></a></li>
		  <li><a href="#4"><img src="img/img-04.jpg"></a></li>
		  <li><a href="#5"><img src="img/img-05.jpg"></a></li>
	  </ul>
</div>

CSS

次にCSSを記述していくのですが、次へと前への画像をCSSの背景画像で表示してありますので、オリジナルの画像を利用する場合は、【slider_prev】【slider_next】の画像名を変更して下さい。
また、画像の階層にも注意して下さい。
デフォルトの画像を利用する場合は、こちらからサンプルファイルと一緒にダウンロード可能です。

.wideslider {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
}

.wideslider ul li img {
	width: 100%;
	display: none;
}

.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}
.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 200;
}

.pagination a {
	margin: 0 5px;
	width: 15px;
	height: 15px;
	display: inline-block;
	overflow: hidden;
	background: #333;
}
.pagination a.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}

JavaScript

最後に、一番初めに保存したjsファイルを開き設定をしていきたいと思います。
スライダーの幅・高さなどは、実装する場所に合わせて下さい。
設定する場所は、2行目から12行目あたりまでなので、それ以外は割愛しています。

$(function(){
	$setElm = $('.wideslider'); //スライドの対象となる要素名
	baseWidth = 960; //スライドさせるコンテンツの幅
	baseHeight = 640; //スライドさせるコンテンツ高さ
	minWidth = 320; //コンテンツ要素の最小幅
	slideSpeed = 1500; //アニメーションスピード
	delayTime = 5000; //アニメーション待機時間
	easing = 'easeOutBack'; //イージング効果
	autoPlay = '1'; // 自動スライドON/OFF (ON=1,OFF=0)
	flickMove = '1'; // フリック動作ON/OFF (ON=1,OFF=0)
	btnOpacity = 0.5; //左右のNEXT/BACKの透過
	pnOpacity = 0.5; //ページネーションの透過

今回は、jquery.easingも一緒に読み込んでいますので、【easing】で設定もしています。
上記以外のエフェクトはこちらをご確認下さい。

上記までを記述すれば、実装の完了となります。
実際にこちらのスライダーを実装したデモサイトも用意していますので、ご参考下さい。

デモサイト

ちょっとしたカスタマイズ

デフォルトの状態でもいいのですが、少しのコードでカスタマイズも可能なので、その辺りもご紹介したいと思います。

ページネーションをスライダーエリア外に表示方法

デフォルトでページネーションは表示されているのですが、表示されている場所がスライダー内で画像何かとかぶってしまいますので、こちらのページネーションをスライダー外に表示して被らないようにしたいと思います。
修正する箇所としては、CSSのみとなりますので、下記CSS部分の変更をします。

.wideslider {
	width: 100%;
	padding-bottom:60px; ←付け足す
	text-align: left;
	position: relative;
	overflow: hidden;
}

上記の【padding-botom】を付け足すだけです。
ページネーションの位置の調整なんかは、【.pagination】のbottomで調整すればOKです。

ページネーションをサムネイルに変更

デフォルトのページネーションでは、CSSの装飾のみなのですが、こちらを画像に合ったサムネイルに変更したいと思います。
こちらもまた、CSSのみで変更可能です。
下記コードをCSSに付け足します。

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 30px;
	text-align: center;
	position: absolute;
	z-index: 200;
}

.pagination a {
	margin: 0 5px;
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	
}

.pagination a.pn1 {background: transparent url(../img/img-01.jpg) no-repeat left top; background-size:30px 30px;}
.pagination a.pn2 {background: transparent url(../img/img-02.jpg) no-repeat left top; background-size:30px 30px;}
.pagination a.pn3 {background: transparent url(../img/img-03.jpg) no-repeat left top; background-size:30px 30px;}
.pagination a.pn4 {background: transparent url(../img/img-04.jpg) no-repeat left top; background-size:30px 30px;}
.pagination a.pn5 {background: transparent url(../img/img-05.jpg) no-repeat left top; background-size:30px 30px;}

スライダーで表示している画像を指定して【background-size】で幅・高さを指定しています。
ページネーションに関しては、生成される際に画像順に【.pn(n)】のクラスが連番で付与されるようになっていることなので、画像に合ったサムネイルを表示させています。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS photoshop_fairy_action_by_lieveheersbeestje-d4wf1oi

写真加工にフリーで使えるPhotoshopアクション 10選

NEXT do-shortcode

WordPressのショートコードをテーマ内にあるファイルで利用する関数