半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べた
コンテンツスライダーを設置する実験
」と題して
画面幅めいっぱいでのコンテンツスライダーを紹介しましたが
当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。

同じ、画面幅めいっぱいでのコンテンツスライダー構成で
レスポンシブ対応させたパターンを必要に駆られて作成してみたので
ここでも紹介してみたいと思います。

【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。

jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験

このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。。。

「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示

スライダー中心にメイン表示エリアを設置して
その前後の画像は左右に透過させたような形で
スライド要素をブラウザ枠めいっぱいに並べて配置しています。

ブラウザサイズがメイン表示エリアより大きい場合は、
左右の透過エリアが枠めいっぱいに広がり、
メイン表示より小さくなった場合には、
全体がブラウザ幅に合わせた形で伸び縮みします。

左右の透過エリアはスライダーのNEXT/BACKボタンとなっているので
クリックすることで一つずつスライダーを移動させることができます。

NEXT/BACKボタンに加えて
表示するコンテンツ要素分のページネーションが付加するようにしてあるので
ページネーションの各ボタンをクリックさせることで
任意のスライド番号へ移動させることも可能です。

※2014/01/15追記
スライドメイン部分をフリック動作させることで、スライド移動させることも可能です。

動作仕様については以上になります。

全体構成についてまずはHTMLから。

◆HTML
<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/photo01.jpg" alt="" /></a></li>
<li><a href="#2"><img src="img/photo02.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/photo03.jpg" alt="" /></a></li>
<li><a href="#4"><img src="img/photo04.jpg" alt="" /></a></li>
<li><a href="#5"><img src="img/photo05.jpg" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->

クラスやIDを付けた任意のブロック要素の中に
<ul>リストを使ってコンテンツ要素(サンプル画面で言うメイン画像)を並べます。

サンプルではコンテンツ要素を5つにしていますが
これを増減させるには単純に<li>の数を増減するだけです。

前回のスライダーと違う点は
<img>タグの属性には「width」と「height」属性はつけない構成にしてあります。

ページネーションや左右のNEXT/BACKボタンは
スクリプト側から生成するようにしているので
HTMLには記述しません。

そしてCSSは以下の様になります。

◆CSS
.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;
}

スライド左右の透過NEXT/BACKボタン部分の色・見た目や
ページネーションの色味などはCSSで指定します。

スライド要素の幅や高さについては
スクリプト側で制御するので、ここでは記述していません。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$setElm = $('.wideslider');
	baseWidth = 800;
	baseHeight = 500;
	minWidth = 320;

	slideSpeed = 700;
	delayTime = 5000;
	easing = 'linear';
	autoPlay = '1'; // notAutoPlay = '0'

	flickMove = '1'; // notFlick = '0'

	btnOpacity = 0.5;
	pnOpacity = 0.5;

	ua = navigator.userAgent;

	$(window).load(function(){
		$setElm.find('img').css({display:'block'});
		$setElm.each(function(){
			var targetObj = $(this),
			wsSetTimer;

			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);
		});
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

$setElm = $(‘.wideslider’) 対象にするブロック要素名(IDでも可)
baseWidth = 800 スライドさせるコンテンツ要素の幅
baseHeight = 500 スライドさせるコンテンツ要素の高さ
minWidth = 320 コンテンツ要素の最小幅
slideSpeed = 500 スライドアニメーションスピード
delayTime = 5000 スライドアニメーション待機時間
easing = ‘linear’ スライドアニメーションイージング
autoPlay = ’1′ 自動スライドON/OFF(ON = 1 , OFF = 0)
flickMove = ’1′ フリック動作ON/OFF(ON = 1 , OFF = 0)
btnOpacity = 0.5 左右のNEXT/BACKエリアの透過具合
pnOpacity = 0.5 ページネーションの透過具合

これらの設定値を変更することでもろもろ調整が可能になっています。

スクリプト全体はあまりシンプルと言える構成ではありませんが
少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。

設置の際の簡単な注意点としては
画像サイズ(比率)によって各エリアの幅と高さを取得して制御していることもあり
使用する(スライドさせる)画像は全て幅と高さを同サイズのものを使用する必要があります。

HTML構成上、このコンテンツスライダー要素全体を囲うブロック要素があった場合は、
その要素の幅は100%になっている必要があります。

スライドアニメーション実行中にブラウザ幅を変えられたりすると
スライド位置がおかしくなることがありますが
ページネーションをクリックする、
もしくは自動スライド機能でスライド全体が一周すると
正常に位置が調整されるようになっています。

カスタマイズに関しては
jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり
CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。

ページネーションについては、
生成される際に個別に「.pn(n)」のクラスが付与されるようになっているので
CSS側からそれらのクラスに対して背景画像を指定することで
サムネイル画像として表示させることも可能です。
※スライド要素が5つの場合はページネーションのクラスは「.pn1」 ~ 「.pn5」という風に個別に付与されます。

jQueryイージングプラグインを使ってスライドアニメーションにイージング処理をつけて、
ページネーションをスライドエリアの外にしてサムネイル表示にした場合は
以下の様な見た目にすることができます。


jQueryイージング+ページネーションをエリア外+サムネイル表示にしたパターンのサンプルを別枠で表示

ブラウザの幅をめいっぱい使ってスライダーを設置することで
ダイナミックな演出を組み込むことが可能かと思っています。

レスポンシブ対応させたブラウザウィンドウ幅めいっぱいのコンテンツスライダーを実装する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (183)

  • Tomo | 2013.07.22 13:04

    ちょうどフルワイドのレスポンシブスライダーを探していて、このページにたどり着きました。
    1つ質問をさせてください。
    スライダーの下に幅指定をしてセンター揃えのコンテンツを配置した際、コンテンツがセンターから左に6pxほどずれるんですが、これは何か工夫がいるんでしょうか?
    高さがあまりない状態だとずれないんですが、高さが500pxほどのコンテンツを配置すると少し左にずれます。スタイルもひととおり見てみたのですが、よくわかりません。
    ご教授いただけると幸いです。

  • BlackFlag | 2013.07.24 1:44

    >Tomoさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    実装されているページの画面構成が不明なのと
    全体のHTMLおよびCSSの構成が分からないと
    ちょっと何も判断することができないです。。

    URLなどお知らせいただければ
    調査できるかもしれませんが・・・

    ご検討ください。
    よろしくお願いします。

  • Tomo | 2013.07.25 13:00

    ご回答ありがとうございます。
    URLを記載しました。
    ダウンロードしたファイルに追記しているのみです。
    h1やフッターもずれているようです。

  • BlackFlag | 2013.07.31 0:24

    >Tomoさん
    ご連絡ありがとうございました。

    確認させていただきましたところ
    ブラウザウィンドウ幅を取得する際の
    スクロールバー有り無しの場合での
    計算部分の原因かと思われましたので
    記事内のスクリプトの方、再度調整してみました。

    おそらくこの構成で大丈夫かと思いますが
    ご確認くださいませ。

    よろしくお願いします。

  • Tomo | 2013.08.09 12:48

    お礼が遅れてもうしわけありません。
    この度はご対応ありがとうございました。
    今後もありがたく参考にさせていただきます。

  • モリック | 2013.08.16 18:03

    jQueryでスライダーを探してここへ来て拝見させていただきました。
    『jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置』と同じ内容で3D回転のようなスライダーの記事を見かけたように思いますが、探しても記事が見当たりません。私の勘違いでしたら申し訳ありませんが、内容が解るようでしたら、アドレスを教えて貰えないでしょうか?
    勝手なお願いで申し訳ないですがよろしくお願いします。

  • BlackFlag | 2013.08.22 0:20

    >モリックさん
    コメントありがとうございます。

    ご質問いただいた件についてですが
    こちらのプラグインのことでしょうか?

    ・様々な3Dエフェクトアニメーションでのコンテンツスライダーを実装できるjQueryプラグイン「Adaptor::jQuery content slider」
    http://black-flag.net/jquery/20120822-4098.html

    違う場合は当ブログの右肩にある検索枠に
    「3D」と入れて検索していただければ
    いくつか3Dスライダーが出てくるかと思います。

    お試しください。
    よろしくお願いします。

  • モリック | 2013.08.22 19:03

    お礼が遅くなって申し訳ありません。
    早速のご対応有難うございました。
    確認できました。今後も勉強させていただきます。

  • 藤原 | 2013.08.25 16:32

    いつもサイトを参考させていただいております。

    今、メインの画像が1枚だけ表示されて、両サイドに画像送り、画像戻しのボタンのレイヤーが被されている状況かと思いますが、
    こちらのメインの画像を3枚にして、その両サイドに画像戻しのボタンのレイヤーが被されている状況にすることは可能でしょうか?

    お手数ですが、ご確認宜しくお願いします。

  • BlackFlag | 2013.09.01 19:22

    >藤原さん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    メイン部分は構成的に一つの画像のみとなっておりますので
    3枚にすることは当スクリプトでは厳しいかと感じております。

    またその様な構成でサンプル等、作ることができましたら
    ここで紹介させていただきたいと思っております。

    よろしくお願いします。

  • ムーニー | 2013.09.10 11:29

    レスポンシブかつ画面いっぱいのスライダーを探しておりましたところ、貴ブログに辿り着きました。
    自分がやりたかったことが、網羅されており大変勉強になっております。

    一点ほど質問したいのですが、ブラウザ幅を変更した際に発生してしまうスライド位置のズレですが、
    「リサイズしたら、初期化する」という風に変更することは可能でしょうか。

    可能な場合、どこを変更する必要があるか教えて頂けますと幸いにございます。
    よろしくお願い致します。

  • BlackFlag | 2013.09.16 11:38

    >ムーニーさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    ブラウザをリサイズした際にリセット(スライド1枚目表示)するには
    スクリプト213行目にリセット用の記述を追記することで可能になると思います。

    このコメント欄に直接スクリプトを記述することは出来ないので
    参考までにサンプルファイルを
    ——————————————
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/jQueryResponsiveFullWideSliderResizeReset.zip
    ——————————————
    にアップしましたので必要であれば
    ダウンロードして中身を確認してみてください。

    ご確認よろしくお願いします。

  • ムーニー | 2013.09.17 16:23

    お礼が遅くなり申し訳ございません。

    サンプルファイルまで作って頂き、ありがとうございます。
    お忙しい中、お手間を煩わせてしまって大変恐縮です。
    すごく勉強になりました。ありがとうございます。

  • kojirou | 2013.10.21 14:48

    初めまして。
    ブラウザ幅いっぱいのスライダーを探しておりましたところ、こちらの記事にたどり着きました。

    1点質問させていただきたいのですが、
    6枚表示にし、IE8(win7)で確認したところ、左右の透過処理がされなくなってしまったのですが、
    IEで6枚以上の表示にも対応できるようにするにはどこを変更すればいいでしょうか…?

    どうぞよろしくお願いいたします。

  • ちゃっく | 2013.10.25 17:06

    横幅100%でループできるjqueryスライダーを探し、こちらのページを探し出す事ができました。
    希望通りの動きでとてもうれしいです。ソースも公開して頂きありがとうございます。

    1つ質問させてください。
    横幅940px×縦350pxのスライド用画像を8つ用意して表示したところ、
    IETesterのIE7で確認した際に左右のnext、prevボタンが表示されている半透明部分が真っ白になってしまいました。(リンクは効いていますし、スライドも問題ありませんが半透明だけが効いていないような状態です)

    試しに設置していただいたサンプルファイルをダウンロードしてIETesterのIE7で確認したところ、
    サンプルも5画像までは左右の透過が効いていますが
    6個目を増やしてみると同じように左右の透過が無くなり真っ白になりました。

    こちらはどこかソースを変更すると直りますでしょうか?

    お手隙の際にお教え頂けましたら幸いです。
    どうぞ宜しくお願い致します。

  • BlackFlag | 2013.10.26 13:05

    >kojirouさん
    >ちゃっくさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    こちらの環境、Windows7でのIE8と「IE TESTER」のIE7やIE8で確認する限り
    サンプルデータの個数を増やしても同様の現象は確認できず、
    問題なく動作しております。

    ご確認いただいているOSはWindowsXP等
    別の環境でしょうか?

    また何か原因等が分かりましたら
    ここにお知らせさせていただきます。

    よろしくお願いします。

  • ちゃっく | 2013.10.28 9:07

    ご返信どうもありがとうございます。
    また、環境を書き忘れ申し訳ありませんでした。

    OSはWindows 7 Professional 64ビットで、IE Testerの最新バージョンで動作確認しておりました。
    (IE TesterのIE8でもやはり個数を増やすと不透明でなくなるようでした)
    こちらでも色々試してみて、何か分かりましたらまた書き込みさせて頂きます。

    どうぞ宜しくお願い致します。

  • mimi | 2013.11.04 13:42

    初めまして。
    大変勉強になるサイトで度々拝見しています。
    『jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験』
    について1点質問があります。

    .slider_prevをクリックした時に起きる現象です。
    paginationの(‘a:first’)[class="active"]付与状態で.slider_prevをクリックすると
    (‘a:last’)に移動し[class="active"]が付与されるかと思います。
    しかし(‘a:last’)[class="active"]になった瞬間に(‘a:first’)にも[class="active"]が付与され
    (‘a:first’)、(‘a:last’)共に[class="active"]となってしまいます。
    そのあとは2つずつ[class="active"]が付与され移動していきます。

    何か間違えたかなと思い
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/
    を拝見したのですが同じ事が起きていました。

    修正する手段はありますでしょうか?
    よろしくお願いします。

  • BlackFlag | 2013.11.04 19:58

    >mimiさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただいた点について
    改めてスクリプトを確認させていただいたところ
    「pagination」の位置指定箇所で
    不必要な記述が残ったままになっていました。
    大変失礼致しました。

    記事内のスクリプトを修正して
    ダウンロードサンプルファイルについても
    再度アップ致しましたので
    お手数ですが修正後のスクリプトを再度ご確認くださいませ。

    よろしくお願いします。

  • mimi | 2013.11.05 11:38

    素早いお返事、対応ありがとうございます。
    removeとaddがいらなかったのですね。
    勉強になりました。
    とっても感謝しています。
    もし可能でしたらこちらのスライダーもフリックに対応して頂けると助かります。
    お暇な時にでもご検討ください。
    よろしくお願いします。

  • kojirou | 2013.11.07 16:01

    BlackFlag様

    お忙しい中お返事いただきまして本当にありがとうございます。
    またご確認頂きありがとうございます

    動作環境はWindows 7 Home Premium 64ビット
    IE8
    IE7(IE Tester)

    です。
    ちゃっく様と同じ現象のようです。

    いろいろ試してみて解決策が見つかりましたらまた書き込みします。

  • SNP | 2013.11.28 22:32

    こんばんは。
    いつもいろいろと参考にさせていただいています。

    質問なんですが、このスライダーをwordpressで使いたいんですが、どうしたら上手く動きますか?

  • BlackFlag | 2013.11.30 11:31

    >SNPさん
    コメントありがとうございます。

    ご質問いただきました件についてですが
    WordPressに組み込む際にも特にスクリプトをカスタマイズ等する必要は無いので
    HTMLソースとCSSとスクリプトが読み込まれるようにしていただければ
    大丈夫だと思います。

    よろしくお願いします。

  • liumei | 2013.12.17 22:02

    Black Flagさま

    jQueryを使いたくて、サイトを拝見させていただいております。
    私はタグを読んでも まだよく分からないのですが、サイトにはたくさんの例が紹介されていて本当に素晴らしいなぁと思っています。

    お忙しい中 申し訳ありませんが、質問をさせていただきたいです。
    画面サイズを小さくしていくと、スライダー左側の半透明の部分が 真ん中に表示されてしまいます。
    Black FlagさまがDEMOとして紹介されているページを試しに、画面サイズを小さくしましたら
    メインの部分がきちんと真ん中に表示されていました。

    お恥ずかしいことに、ほとんどコピペなのですが(1つ違う点は画像がjpgではなく、pngです)、どちらの部分が影響されているでしょうか?
    その部分が分かれば、設定を変更していきたいです。
    どうぞよろしくお願い致します。

  • hiyo | 2013.12.18 18:49

    初めまして。
    レスポンシブ対応のスライダー、とても助かります。
    ありがとうございます。

    ところで一つ質問ですが、例えば画像が5枚あったとして
    5枚目でストップさせたい場合は、スクリプトファイルの
    どのあたりを編集すればうまくいきますでしょうか。

    よろしければ教えていただけると助かります。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2013.12.21 12:31

    >liumeiさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実際に組み込まれているページを確認できないと何とも言えないのですが
    画像の種類が影響することは無いと思いますので
    考えられることとしてはCSSブラウザリセットの影響かな、と想定しています。

    サンプルデータで読み込ませている「reset.css」を
    実装されているページに読み込んでみて
    事象が解消されるかお試しください。

    憶測での回答になってしまいますが
    よろしくお願いします。

  • BlackFlag | 2013.12.21 12:40

    >hiyoさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    当記事のスライダーの仕様として、
    NEXT/BACKボタンやページネーションボタンが存在しているので
    最後でストップさせる仕様と考えた際に
    途中でユーザーにボタン操作されたらどうするか、など
    いろいろと想定する必要がある動作パターンが出てくると思いますので
    スクリプトを少し変えるだけ、というカスタマイズでは厳しいかと思っております。。

    よろしくお願いします。

  • shu | 2014.01.15 11:28

    jQueryでスライダーを探しこちらの記事にたどり着きました。
    初心者の私にはかなり勉強になります。

    このスライダーを使いたいと思いいろいろ試してみましたが、
    どうしても画像が右にずれてしまいます。

    また、途中から画像が無くなり真っ白の状態になります。
    URL↓
    - 2014/01/21 削除 -

    それと、ページネーションをスライドエリアの外にしてサムネイル表示にしたいのですがやりかたがよくわかりません。

    ド素人の質問すみません。

    自力でいろいろ試しましたが出来なかったのでコメントさせて頂きました。

    ご回答頂ければ幸いです。

    宜しくお願い致します。

  • BlackFlag | 2014.01.19 11:17

    >shuさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    おそらくCSSのブラウザリセットがされていない影響ではないかと思われますので、
    CSS内にスライダー部分の「margin」と「padding」の値を0にするように
    ———————————————
    .wideslider,
    .wideslider * {
    margin: 0;
    padding: 0;
    }
    ———————————————
    を追記すれば大丈夫だと思います。

    ページネーションのサムネイル化についてはサンプルファイルのCSS内で
    位置指定やサムネイルに表示する画像ファイルを指定していますので
    CSSファイルの中身をご参照ください。
    (ページネーションのサムネイル化は
    CSSの調整のみでHTMLとスクリプト側には特に変更点はありません。)

    お試しください。
    よろしくお願いします。

  • shu | 2014.01.21 12:22

    対応ありがとうございます。
    ご指示いただいた通りCSSに追記すると直りました。
    ありがとうございます!
    感謝しております。
    ページネーションのサムネイル化についても実践してみます。
    今後もこちらのサイトで勉強させて頂きます。
    また、お手数ですがコメントで貼ったURLは削除して頂けると幸いです。
    宜しくお願い致します。

  • aya | 2014.01.27 16:46

    初めまして。検索からたどり着きました。
    こちらのレスポンシブスタイダーをぜひ利用したいと思っているのですが
    左右のprev,nextボタンの画像のみ透過をなくすにはどうしたらよいのでしょうか
    slide_prev,slider_nextというdiv要素のバックグラウンドにprevnextボタンの画像がはいる仕組みなので
    btnOpacityを1にするとボタン以外のdiv要素もすべて透過がなくなってしまいます。
    知識が未熟なもので自分で解決することができませんでした

    回答お待ちしております
    失礼いたします。

  • BlackFlag | 2014.01.29 0:56

    >ayaさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    もともとその様な想定はしておらず
    色々と構成を変えて試してはみましたが
    現状のスクリプト構成だとちょっと厳しいかもしれません。。
    (大幅にボタン部分のスクリプト構成を変えれば不可能ではないと思いますが・・・)

    またその様な仕様でのボタン動作ができましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • aya | 2014.01.31 11:01

    BlackFrag様

    御返信ありがとうございます!了解いたしました。
    こちらこそ無理な要望を言ってしまい申し訳ありませんでした。
    新しいスライダーの紹介を楽しみにしております。
    これからもどうぞよろしくお願いいたします。

  • 通りすがりのコーダー | 2014.02.03 15:04

    IEの古いブラウザでも問題なく動いたので大変助かりました!!!!!!!!

    ありがとうございました!!!!!!!!

  • BlackFlag | 2014.02.04 0:31

    >通りすがりのコーダーさん
    コメントありがとうございます。
    このコンテンツスライダーがお役に立った様で
    嬉しく思っております。

    また何かありましたらよろしくお願いします。

  • tanecohan | 2014.02.18 18:10

    こんにちは!!
    今回、コンテンツスライダーを使用させて頂きました!!
    すごくわかりやすいご説明ですぐにできましたが、IE7のPCでも確認した所、IEではスライドなりませんでした。

    他の方のコメントを見る限り、IE対応してるかと思うんですが、PC環境が悪いのかIE対応するように何か組み込まないといけないのかを教えて頂けると幸いです。

    よろしくお願い致します。

  • BlackFlag | 2014.02.19 0:38

    >tanecohanさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    IE7の動作に関しては「IE TESTER」での確認になりますが
    その際は正常に動作していました。
    (他の方で古いIEで動いたとの報告も受けております)

    スクリプト自体は特に古いIE向けに何か特別なこともしていないので
    ブラウザ設定(互換モード等)を確認してみてください。

    よろしくお願いします。

  • レオ父 | 2014.02.27 0:24

    とっても素敵なjQueryコードをありがとうございます。
    ブラウザ幅いっぱいのスライダーでこちらへたどり着きました。
    説明が丁寧でとてもわかり易かったです。
    現在ヘッダーとフッターに
    BlackFlagさんの作られたスライダーを使わせて頂いております。
    本当にありがとうございましたヽ(*´∀`)ノ

  • sarah | 2014.02.28 8:48

    こんにちは。
    今回スライダーを使用させていただきます。

    表示についての質問ですが、
    サイト読み込み時に表示されず、サイト更新すれば表示されるという減少が起こっております。

    似たような減少が起こっている方はおられないでしょうか?
    また、解決策があればご教示いただけると助かります。

    どうぞ宜しくお願い致します。

  • BlackFlag | 2014.03.02 12:42

    >レオ父さん
    コメントありがとうございます。
    このコンテンツスライダーを含む当ブログのスライダーサンプルを
    いろいろとご活用いただいている様で
    とても嬉しく思っております。

    スライダーの他にも様々なUIサンプルを掲載させていただいておりますので
    いろいろとお試しいただけると幸いです。

    よろしくお願いします。

  • BlackFlag | 2014.03.02 12:50

    >sarahさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    表示についての件についてですが
    当記事にあるサンプルファイルも
    その様な現象になっているということでしょうか。

    当方の環境では同じような事は起こっておらず
    現象を再現できておりません。。

    実装された際の他のスクリプトとの影響なども考えられますので
    一度、当ブログのスクリプトのみを実装してみて
    同じ現象が起こるかどうか、などお試しいただけますでしょうか。

    よろしくお願いします。

  • Yi | 2014.03.04 10:41

    初めまして。とても役に立つスライダーを公開していただき、感謝です!
    可能かどうか質問です。
    このスライダーはブザウザ幅いっぱいに表示されるのがキモだと思いますが、ブラウザ幅ではなくコンテンツ幅いっぱいの表示で、さらにレスポンシブに変更することは可能でしょうか。
    例えば、デフォルトでは985pxの表示で左右に前後のスライダが透過表示し、それ以下ではレスポンシブ…という感じです。
    スタイルシートではなくて、JSの大幅な変更が必要になりますか?
    よろしくお願いします。

  • タナ | 2014.03.05 18:16

    いつも素敵なjQueryコードを参考にさせていただいております。

    ブラウザ幅いっぱいのスライダーですが、ブラウザ幅いっぱいではなく、
    両サイドに少しブランクを開ける方法は上記スクリプト内やcssで可能でしょうか?
    (たとえば、ブラウザ幅いっぱいではなく幅を1200pxに指定する等)

    素人なものですいません、ご教授ください。

  • BlackFlag | 2014.03.08 11:33

    >Yiさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実装しようとしている形状が明確に分からないのですが
    当ブログ別記事の
    ———————————————————
    ・jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法
    http://black-flag.net/jquery/20130514-4588.html

    ・jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法
    http://black-flag.net/jquery/20130423-4566.html
    ———————————————————
    こちらを使用することで
    実装可能ではないでしょうか。

    お試しください。
    よろしくお願いします。

  • BlackFlag | 2014.03.08 11:38

    >タナさん
    コメントありがとうございます。
    このコンテンツスライダーをご検討いただいている様で
    嬉しく思っております。

    ウィンドウ幅の件ですが
    基本的には幅めいっぱいで諸々計算しているので
    左右にブランクを開ける想定はしておりませんが
    スライダー全体をもう一つ別のブロック要素で囲って
    そのブロック要素に左右のブランクをつけることで
    可能になるかも、と想定しております。(CSSでの調整のみ)

    憶測での回答になってしまい申し訳ありませんが
    お試しください。

    よろしくお願いします。

  • ヒョウタ | 2014.03.24 18:15

    こんにちは。今回のスライダーを使用させて頂いております。

    ご質問なのですが、PCでの表示は問題ないのですが、スマホ・タブレットでの表示を確認した際に
    スライドの開始位置がずれて表示されます。
    (PCでは中央に画像が来て、その画像を中心に、ブラウザめいっぱいに広がっていますが、スマホ・タブレットでは画像が中央に表示されず、ずれて表示され見切れています。)

    当方、jQueryにはあまり詳しくない初心者ですが、スライダーの開始位置などを設定する項目などは
    あるのでしょうか?

    ちなみに、Android、I Phon、I Pad等、PC以外のものは全て開始位置がずれてしまいます。

    ご教授して頂ければ幸いでございます。
    宜しくお願い致します。

  • BlackFlag | 2014.03.30 0:23

    >ヒョウタさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが、
    当記事のサンプルファイルも同様の現象が起きるということでしょうか。
    こちらの環境ではPC、タブレット、スマホ(iPhone,Android)で確認する限り
    その様な現象は起きておりません。。

    スライダーの開始位置の指定についても
    スクリプト側でその様な設定をする部分はありません。

    今一度、当記事でダウンロードできるサンプルファイルを
    ご確認頂ければと思っております。

    よろしくお願いします。

  • ta | 2014.04.01 15:22

    いつも素敵なjQueryコードを参考にさせていただいております。

    コメントにもあり、修正済みとなっていたのですが、ブラウザのスクロールバー(縦)があると画像の位置が7px程、右にずれてしまいます。
    ブラウザの幅を少しでも動かすともとに戻るのですが、更新したりするとずれた状態になってしまいます。
    自分では力不足で直せず、BlackFlagさんを頼るしか出来ず申し訳ないです。
    DEMO環境でも同様の現象が起きていたので、お手すきな時にでも確認して頂けたら助かります。

    宜しくお願い致します。

  • korokoro | 2014.04.02 0:29

    初めまして!
    いつもスライダーの際に参考にさせていただいており、誠に助かっております。

    可能かどうかご質問なのですが、
    こちらのスライダーは、スライドする際に1つずつ移動しますが、こちらを2つ同時に移動する事は可能なのでしょうか?

    もし可能でしたら、ご教授いただけますと幸いです。

  • BlackFlag | 2014.04.06 11:21

    >taさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご指摘ありがとうございました。
    失礼致しました。

    スクリプトを再調整してサンプルファイルを更新しましたので
    ご確認いただければと思います。
    (スクリプト223行目に「.resize()」を追加した形になります。)

    よろしくお願いします。

  • BlackFlag | 2014.04.06 11:26

    >korokoroさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    現状ではスライドは1つずつのみとなっており
    2つ同時の移動については想定しておりません。

    また任意でスライド移動個数が決められるような仕様ができましたら
    こちらで紹介させていただきます。

    よろしくお願いします。

  • ゆら | 2014.04.08 21:30

    初めまして、ゆらと申します。
    とても使い心地の良いjQuery、すごく参考になりました。
    他記事もとても勉強になります、ありがとうございます。

    一点、こちらのjQueryについて気がついた点がございましたので、ご連絡させていただきました。
    iOS版のchromeだと、スライド部分全体が表示されないようです。
    iPhoneとiPadで比較した時に見つけました。
    PCのChromeでは問題はなかったのですが…。

    理由を探してみていますが、まずはご報告まで。
    どうぞよろしくお願い致します。

  • BlackFlag | 2014.04.09 19:51

    >ゆらさん
    コメントありがとうございます。
    このコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    iOSのChromeの件、確認させていただきました。
    高さの値を入れ込むイベントがどこかの時点から(ブラウザのバージョンアップ?)
    動作が微妙になっていたようでした。

    少々強引な手段ではありますが
    スクリプト最後に高さを計算するイベント「setSlide()」を
    setTimeoutにて0.5秒後に再動作させる形で
    表示させるよう調整致しました。

    記事内のスクリプト及び
    サンプルファイルを更新してありますので
    ご確認いただければと思います。

    またお気づきの点が御座いましたら
    お知らせいただけると幸いです。

    よろしくお願いします。

  • Alenta | 2014.04.09 19:52

    初めまして、このプラグインで思うようなデザインができてとても助かりました。
    ありがとうございます。

    ところで、可能かどうか質問があるのですが、
    サイドの”next”と”prev”の他に1ページ目にテキストとして”ギャラリーを見る”と配置して、
    クリックすると”next”と同様に2ページ目にスライドしたいのですがそれは可能でしょうか?

  • BlackFlag | 2014.04.13 12:28

    >Alentaさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    別途用意するリンク等にタグについて
    スライダーのnextボタンに設置してあるCSSクラス「.slider_next」を
    クリックさせるイベントを指定することで可能になるかと思います。


    —————————————
    $(’a.next_btn’).click(function(){
    $(’.slider_next’).click();
    });
    —————————————

    お試しください。
    よろしくお願いします。

  • roland | 2014.04.26 22:37

    初めまして、とても素晴らしいスライダーをありがとうございます。
    初心者で申し訳ないのですがご教授お願いします。
    スライダー幅を画面いっぱいではなく1000pxに抑え前後(左右)の画像のはみ出た部分を表示させない、両端をカットするという事をしたいのですが可能でしょうか。
    真ん中メインの画像の左右にある画像を見切れさす、というような感じなのですがわかりにくくて申し訳ありません。
    スライダーをdivで囲ってそれにwidth1000pxを書くと大きいブラウザでは右側だけ消えてしまいます。スライダーをセンタリングしようにもうまくいきません。
    解決法がもしあればお願いします。

  • BlackFlag | 2014.04.27 0:25

    >rolandさん
    コメントありがとうございます。
    当記事のコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件ですが
    当記事のスクリプトを使ってその様な見た目にするには
    スクリプト内の「btnOpacity」の値を「1」にして
    CSSで左右のボタンに指定している背景画像を削除する形になるかと思います。
    (見た目的には左右カットになりますが左右ボタンのクリック動作は残ります)

    レスポンシブでのスライダーでしたら
    別記事になりますが
    ———————————–
    ・jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法
    http://black-flag.net/jquery/20130514-4588.html
    ———————————–
    この様なパターンやいくつか別のパターンも紹介させておりますので
    「レスポンシブ」タグからそれぞれご確認いただけますと幸いです。

    よろしくお願いします。

  • roland | 2014.04.27 12:24

    ご返答ありがとうございます。とても感謝しています。
    早速試してみました!前後の画像を完全に消すのではなく
    ]□[   (左から、前の画像、真ん中メインの画像、次の画像)
    という風に例えば幅1000pxとして画像の幅が700pxだとして左の画像を150px、右の画像を150pxだけ見える様にする、というのは可能でしょうか。
    重ねての質問、大変失礼とは思いますがもしよければ、ご教授お願いしたいです。

  • tenten | 2014.04.28 3:50

    はじめまして
    左右に送り画像が閲覧出来、レスポンシブ対応且つフリック対応と
    まさに探し求めていたスライダーでしたので
    早速使わせていただいております!!

    ところで一つ質問があり、コメントさせて頂きました。
    フリック時に左右で画像が移動するのは良いのですが
    上下の場合はブラウザがスクロールするように出来ないんでしょうか?
    画像の縦サイズが大きい場合フリック機能により
    ページ下部に移動出来ない事がありましたので。。。

    よろしくお願い致します。

  • BlackFlag | 2014.04.28 12:10

    >rolandさん
    ご確認ありがとうございます。

    実装されようとしている様な構成でのコンテンツスライダーも
    jQuery等を使って作成することは可能だと思いますが
    当記事のスクリプトを使用する場合は
    あちこちカスタマイズする必要があると思われます。

    その様な構成でのコンテンツスライダーのサンプルが出来ましたら
    またここで紹介させていただきます。

    よろしくお願いします。

  • BlackFlag | 2014.04.28 12:43

    > tentenさん
    コメントありがとうございます。
    当記事のコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件ですが
    上下のスクロールを生かす場合のやり方としては
    当記事スクリプトの243行目の「e.preventDefault();」の1行を
    233~235行目の3行をコピペして書き換えることで
    ひとまずは上下スクロールを動作させることが出来るかと思いますが
    縦横同時にタッチスクロール動作が生きることになるので
    操作感が微妙になってしまうかもしれません。。
    (スライドアニメーションが実行中は動作は固定されます。)

    縦横のタッチスクロールの動作調整が来ましたら
    記事のスクリプトも改修させていただきます。

    よろしくお願いします。

  • tenten | 2014.04.29 18:52

    ご返信有難うございます!!

    お教授頂いた方法でスクロール動作が可能になりました。
    動作調整の方も是非よろしくお願い致します。

  • しんや | 2014.05.25 11:58

    いつも勉強させていただいています。

    WordPressのこのThemeに、
    http://demo.alienwp.com/hatch/
    設置は可能でしょうか。

    レスポンシブ対応Themeなのですが、スライドを囲むボックスのwidthを100%にすると全体が崩れてしまいます。
    おそらくボックスの並べ方で解決できるのではと思っていますがうまくいきません。
    スライダーとは直接関係ないかもしれませんが、よろしければ教えていただけると助かります。

  • BlackFlag | 2014.05.30 1:45

    >しんやさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    どのように実装されようとしているか、形状が明確に分からないのですが
    WordPressのテーマ内に組み込むことは可能かと思っております。

    ますは当ブログサンプルのHTML、CSS、スクリプトを
    そのままテーマ内に貼り付けて、正常に動くことを確認できたら
    徐々にカスタマイズする、という流れの方が実装しやすいかと思っております。

    お試しください。
    よろしくお願いします。

  • しんや | 2014.06.01 22:40

    お返事してくださり、ありがとうございます。
    wordpressで無事表示できました。
    上で質問されてるshuさんと同じ様にずれてしまっていましたが、
    ご教授されている通りにmarginとpaddingをリセットしてあげたらうまくいきました。
    大変助かりました。引き続き参考にさせていただきます。

  • かなた | 2014.06.03 14:22

    はじめまして
    ブラウザウィンドウ幅めいっぱいに要素を並べたスライダーを活用させていただいております。

    なにぶん素人なもので分からないことを質問させていただきます。
    wideslider_baseのポジションをセンターから少しずらして表示させる事は可能でしょうか?
    例えば、今のセンターポジションから左に200pxずらすなど出来ますでしょうか?

    よろしければ教えていただければ助かります。

  • なお | 2014.06.03 18:38

    初めまして。
    素敵なスライダースクリプト、早速
    使わせて頂いてます!

    一つ質問なのですが、WordPressで
    試用しているのですが、

    slider_prev slider_next paginationの
    リンクが全く効かなくなってしまいました。。。

    解決策をご教授頂けないかと思い、コメント
    しました。

    宜しくお願い致します。

  • BlackFlag | 2014.06.04 0:28

    >かなたさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただいた件ですが
    どのような形状で実装されようとしているか明確に分からないのですが
    基本的にはスライダー全体は中央寄せのみになっておりますので
    左右に余白やマージンをつける想定はしておりません。

    よろしくお願いします。

  • BlackFlag | 2014.06.04 0:38

    >なおさん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    左右のボタン等の動作が効かない件についてですが
    URLを確認させていただいた限りでは
    CSSで「.wideslider」に「z-index」が「-1」の値で
    設定されている原因かと思われます。

    「.wideslider」には「z-index」を指定したとしても
    マイナス値で構成することにならないように調整してみてください。
    ※WordPressに関しては特に影響ないと思われます。

    よろしくお願いします。

  • なお | 2014.06.04 2:15

    お返事ありがとうございます!

    早速試してみました。
    でz-indexが効かないので仕方なく-1していたのですが、
    単純なミスpositionを指定してなかったのでz-indexが聞かなかった
    みたいです><

    教えて頂いた通り調整したら出来ました!
    本当にありがとうございました。

  • かなた | 2014.06.04 10:40

    お返事いただきありがとうございました。
    画説で申し訳ないんですが、実装したいのはこんな感じです。
    コード自体はあまり変更していません。

    スライダー自体に余白やマージンをつけるつもりではなく
    アクティブイメージ?のスタートポジションが現在leftで設定されていますがleftの数値はどこで変更できますでしょうか?

    何度もすみませんが、宜しくお願い致します

  • BlackFlag | 2014.06.05 0:17

    >かなたさん
    ご連絡いただいたURLはIPアドレスでアクセス制限がされているようなので
    こちらからは画面を確認させていただくことができませんでした。。

    ご確認ください。
    よろしくお願いします。

  • かなた | 2014.06.08 23:57

    ご連絡が遅くなってしまって申し訳ありません。
    サーバーを変えて画像をアップしてみましたので、多分見れるかと思います。

    申し訳ありませんが、ご覧いただいてご回答いただければと思います。

  • BlackFlag | 2014.06.10 0:37

    >かなたさん
    画面確認させていただきました。

    画像のような構成でスライダーを作ることも可能かと思いますが
    当記事のスクリプトで実装するにはスクリプトをあちこちカスタマイズする必要があり
    ちょっとした調整だけでは厳しいかと思っております。
    (因みにサイドのボタンの位置やサイズを調整する箇所は
    スクリプトの89~100行目辺りになります・・・)

    またこの様な構成でのスライダーサンプルができましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • かなた | 2014.06.11 20:09

    ご回答ありがとうございました!

    自分でも出来る限りいじってみようと思います。
    ありがとうございました。

  • みさき | 2014.06.17 13:21

    はじめまして。
    スマホにも設置できるフリック対応のギャラリーを探してこちらに辿り着きました。

    素晴らしいスライダーなのでサイトに設置したいと思うのですが、各画像データごとにキャプションを加えることは可能なのでしょうか。
    画像が表示される時にキャプションも同時に表示されるイメージです。

    ┏━━━━━┓ ┏━━━━━┓
    ┃ 画像A ┃ ┃ 画像B ┃
    ┗━━━━━┛⇒┗━━━━━┛
    Aキャプション  Bキャプション
      ●●●     ●●●

    可能であれば、キャプション内にリンクを貼れるように普通のテキスト入力(?)だと助かります。
    common.cssの『.pagination a.pn1』の辺りで何か入れる方法はないでしょうか。

    ご検討頂けましたら幸いです。
    宜しくお願い致します。

  • BlackFlag | 2014.06.18 1:29

    >みさきさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただいたキャプションについてですが
    実装することに関しては可能かと思っております。

    HTML側で<li>の中に<span>などを使って
    キャプション用の要素を記述しておき(デフォルトでは非表示)
    もともとスクリプト側でセンターに表示されている<li>リストに対して
    「mainActive」のクラスが入るようにしてありますので
    スライドが動くたびに「mainActive」のクラスが入ったリストの<span>のテキストを抜き出して
    キャプションを表示する要素の中に入れ込む、といった構成イメージになるかと思っております。

    またその様なオプションを追加できましたら
    こちらの記事を更新させていただきます。

    お試しください。
    よろしくお願いします。

  • なかた | 2014.07.01 1:58

    はじめまして
    とてもよいコンテンツスライダーですね。利用させていただいてます。
    一つ質問がございます。
    画像と画像の間に隙間を入れることは可能でしょうか?
    paddingなどを挿入しましたが、ずれてしまい、うまくスライドされませんでした。
    どうぞよろしくお願いします。

  • BlackFlag | 2014.07.02 0:50

    >なかたさん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    画像の左右に余白を開けるには
    <li>に対してmarginやpaddingを付けるのではなくて
    <li>の中の画像に対してmargin等をつけることで
    可能なのではないかと思っております。
    (サンプルで言う「.wideslider ul li img」)

    お試しください。
    よろしくお願いします。

  • あずさ | 2014.07.04 8:14

    はじめまして。
    画面幅に対応し、サムネール付きのスライダーを探しおりましたところ、貴サイトにたどり着きました。
    jQuery初心者なので、大変勉強になります。

    1点ご質問させていただいてもよろしいでしょうか。

    サムネール表示画像を各ページで変更することは可能でしょうか?
    お時間がありましたら是非ご返答をお願い致します。

  • BlackFlag | 2014.07.06 12:21

    >あずささん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    サムネイルの見た目の変更に関しては
    スクリプト自体には影響しない範囲になりますので
    CSSでの調整になります。

    スライダー部分のHTMLソースよりも前の部分で
    idなりクラスなりを付ける事で可能かと思っております。

    例えば、bodyタグにidを付け、
    ————————————–
    【Aページ】body id=”patternA”
    【Bページ】body id=”patternB”
    ————————————–
    そのidの継承を利用して同じ要素に別画像を指定します。
    ————————————–
    #patternA .pagination a.pn1 {background: url(../img/img1.jpg);}
    #patternB .pagination a.pn1 {background: url(../img/img2.jpg);}
    ————————————–
    ※コメント欄の都合上、ところどころ大文字で記述してあります。

    お試しください。
    よろしくお願いします。

  • あずさ | 2014.07.07 18:45

    お忙しい中ご返信いただき有難うございます。

    cssでの画像変更で対応させていただきます。
    本当に有難うございました。
    スライダーを使わせていただきます。

  • すてきなjQueryスライドショーまとめ | モノづくりブログ - 株式会社8bit | 2014.07.18 11:29

    [...] Full-width Slider http://black-flag.net/jquery/20130709-4710.html [...]

  • taz | 2014.07.21 19:49

    クールなスライダーを探していてこちらにたどり着きました。
    素敵なスライダー、感謝です!ありがとうございます。

    手探りで格闘しているのですが、
    下記のようなサイトみたいにサムネイルを隠し、オン表示することは可能でしょうか?
    http://www.hanamaruudon.com

    なにぶん初心者ですので、失礼な質問をしていたらすみません。
    よろしくお願いします。

  • BlackFlag | 2014.07.24 0:46

    >tazさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    サムネイル(.pagination)をCSSでスライダーの外へ配置し
    スクリプト側でロールオーバーで位置調整する形になるかと思います。

    このコメント欄に直接スクリプト等を記述することは出来ないので
    参考までにサンプルファイルを
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/jQueryResponsiveFullWideSliderThumbHover/
    にアップ致しました。

    参考までにサンプルファイル一式は
    —————————————————
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/jQueryResponsiveFullWideSliderThumbHover.zip
    —————————————————
    にアップしましたので
    必要であればダウンロードして中身を確認してみてください。

    お試しください。
    よろしくお願いします。

  • Yuko | 2014.07.25 19:48

    とても素晴らしいスライダーをありがとうございます。
    PreとNextの左右の画像自体を透過させることは可能でしょうか?
    ページの背景画像に柄があるため、画像自身を透過させたいと思い、質問をさせていただきました。
    よろしくお願いします。

  • taz | 2014.07.27 0:32

    こんばんは
    初心者の私の質問にお答えいただき、ましてサンプルまで作成して頂けるとは感激です。
    本当にありがとうございました。心して勉強させていただきます!

    図々しいながらもう一点お聞きしたいことがあります。
    これも初歩的な質問かもしれませんが、ウィンドウを縮小して行くとある一定のところから
    スライダーも一緒に縮小してしまうのですが、縮小しないで固定するにはどこをいじれば良いのでしょうか?

    すみません、お時間のあるときで結構ですのでご教授ください。
    よろしくお願いします。

  • BlackFlag | 2014.07.27 11:48

    >Yukoさん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    左右の画像を透過させるには
    メイン(真ん中)リスト<li>には
    クラス「mainActive」が入る構成にしておりますので
    その部分は透過度100%にして、他の透過度を下げるように
    CSSを追加することで実現できるのではないかと思っております。

    .wideslider_wrap li img {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    }
    .wideslider_wrap li.mainActive img {
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }

    お試しください。
    よろしくお願いします。

  • BlackFlag | 2014.07.27 11:53

    >tazさん
    当記事のスライダーはレスポンシブ動作を実装させたスライダーになっておりますので
    ウィンドウサイズによっての伸縮が必要ない場合には
    記事冒頭にもリンクさせていただいております別記事の

    ・jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
    http://black-flag.net/jquery/20121219-4407.html

    こちらをご使用ください。
    よろしくお願いします。

  • Yuko | 2014.07.30 12:30

    BlackFlagさん、
    ありがとうございます!実現できました。
    助かりました。
    今後も、利用させていただきます。

  • ニシムラ | 2014.08.01 2:17

    お世話になります。探していた、理想の動作、しかもレスポンシブのスライダーをこちらで発見して大変助かりました。ありとうございます。
    しかし、私のサイトで、FireFoxですと、画像が中央に表示してくれません。
    思い切って、サンプルサイトをマルコピして現在のサイトに埋め込んでみたのですが同じ現象でした。
    もちろん、こちらのサンプルサイトは、FireFoxですと正常に表示されていることは確認しております。
    私の知識が乏しいため、、、大変ぶしつけなお願いですがよろしくお願いいたします。

  • BlackFlag | 2014.08.01 3:02

    >ニシムラさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    HTML上のスライダー実装箇所の以前にあるナビゲーション郡の
    回り込み解除が正常にされていない影響だと思われます。

    実装されている「.slider」クラスに対して
    「clear:both」の回り込み解除指定を入れることで
    解消されるのではないでしょうか。

    お試しください。
    よろしくお願いします。

  • 私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど) | OZPAの表4 | 2014.08.07 7:30

    [...] プラグインはこちら:jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag [...]

  • ina | 2014.08.26 13:14

    はじめまして。
    画面フルで、左右にスライドさせる画像が出ているスライダーを探していて、こちらのスライダーがとても理想に近かったので使わせて頂きたく思っています。
    スクリプトの勉強不足で、1つ質問させてください。
    スライドした時に左右にぶれるアニメーションをやめ、ぴったり止まるようにしたいのですが、どこを触ればいいでしょうか?
    お忙しい中大変申し訳ありませんが、よろしくお願い致します。

  • BlackFlag | 2014.08.27 0:44

    >inaさん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ご質問いただきましたスライド時の動作に関しては
    イージング設定部分にて調整が可能になっておりますので
    スクリプト12行目の「easing = ’○○’」のところに
    ぶれの起きないイージングを指定することで可能になります。

    イージングに関しては当ブログ別記事の、
    —————————————
    ・jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】
    http://black-flag.net/jquery/20120530-3883.html
    —————————————
    こちらもご参考にしていただければと思っております。

    お試しください。
    よろしくお願いします。

  • ina | 2014.09.04 12:46

    お忙しい中、ご丁寧にお教え頂きましてありがとうございます。
    沢山種類があって驚きました。試してみます。
    今後も利用させて頂きたく思います!

  • 高橋 | 2014.09.19 17:28

    こんにちは、お忙しい中恐れ入ります。変更を加えたいので教えてください。
    Javascript に関して全く知識がありませんので、どうぞよろしくお願いします。

    ページネーションをサムネイル化したものを使用させていただいているのですが、

    ①メイン画像が自動でスライドする度に、サムネイルも連動して画像を切り替えることはできないでしょうか。

    ②またサムネイルにオンマウスした際に画像が切り替わるようにできないでしょうか。

    ③サムネイルクリックではなく、オンマウスでメインイメージが切り替わるようにはできないでしょうか。

    ③に関しては、121行目 pnPoint.click(function(){ のclickをhoverに替えたらうまくいきましたが問題ないでしょうか。

    クライアントよりこちらのサイトのように動かしてほしいという要望をいただき困っております。どうぞよろしくお願いいたします。
    http://www.coleman.co.jp/

  • BlackFlag | 2014.09.21 0:17

    >高橋さん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    ①はサムネイルにはアクティブ状態の場合に
    「active」のクラスが付くようになっていますので
    「active」のクラスが付いているか付いていないか、によって
    表示させる画像を変えることで実現できるかと思います。

    ②はその様な判別は入れていないので
    ロールオーバーで任意のクラスが付くように調整する必要があるかと思います。
    そしてそのクラスが付いている時と付いていない時で
    表示させる画像を変えることで実現できるかと思います。

    ③はその様な構造でも大丈夫だと思いますが
    クリック処理内に入れてある132行目の自動アニメーション再開処理は
    マウスアウトのイベントに入れた方が良い気もしています。

    以上になります。

    ざっくりな説明のみになってしまいますが
    お試しください。

    よろしくお願いします。

  • mine | 2014.09.22 9:33

    BlackFlag様

    はじめまして。こちらのスライダーを拝見させて頂き、とても理想の形に
    近く、ぜひ使用させて頂きたいと考えているものです。

    ただ、検証させて頂く中でどうしても解決できない点があり、ご連絡いたしました。

    以前、同じ内容でご質問された方がいらっしゃるかとは存じますが、スライダーの
    上や下にセンター揃えのコンテンツがある場合、7pxほどスライダーのセンター画像が
    右にずれてしまいます。以前の方へのご回答では、「
    ブラウザウィンドウ幅を取得する際のスクロールバー有り無しの場合での計算部分の原因」
    とありますが、調整させていただいたのですが、どうしても同じような状態になってしまいます。

    お忙しいところ大変申し訳ございませんが、解決方法がありましたら何卒
    ご教示お願い申し上げます。

  • BlackFlag | 2014.09.25 1:46

    >mineさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    こちらで確認する限りズレは発生しないかと思っているのですが
    当記事のサンプルスクリプトでも同じ現象が起きているのでしょうか。

    ご実装されたHTMLや、確認されている環境なども
    お知らせいただけると幸いです。

    よろしくお願いします。

  • ひでお | 2014.09.27 23:58

    こんにちは。
    はじめまして。
    こちらのスライダーを拝見させて頂き、ぜひ当方のサイトに利用
    させて頂きたいと考えております。

    初歩的な質問で恐縮ですが、画像の左右にマージンをおくにはどうすればよいでしょうか?
    その指定したマージン分、他の要素からずれてしまってどこをいじればよいのか・・・

    画像のベースの表示は980にしたい
    baseを1010に設定して.wideslider ul li imgのパッディングを左右15pxにすれば
    できるのでは・・・と思いましたが左のパッディングはOKでも右には画像が伸びてしまう・・・と苦戦しております。

    解決方法がありましたらご教示お願い申し上げます。

  • BlackFlag | 2014.09.29 1:21

    >ひでおさん
    コメントありがとうございます。
    このコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    画像の左右に余白を開けるには
    <li>の中の画像に対してpaddingではなくmarginを
    左右につけることで可能なのではないかと思っております。
    (サンプルで言う「.wideslider ul li img」)

    お試しください。
    よろしくお願いします。

  • asuka | 2014.09.29 15:08

    自動スライドの方向を逆(左から右に送る)にするにはどうしたらいいですか。

  • BlackFlag | 2014.10.01 0:28

    >asukaさん
    139行目の「findNext」を「findPrev」にしてみてください。

  • LS | 2014.10.12 14:01

    はじめまして!
    とても使いやすいスライダーをありがとうございます。

    コメント欄に書き込まれた内容をいろいろ試してみたのですが、
    CHROME,IE, safariなどどれも、スライダーが少し右にずれてしまします。

    もし、改善策があればご教示いただければ幸いです。
    よろしくお願い致します。

  • BlackFlag | 2014.10.15 1:27

    >LSさん
    コメントありがとうございます。
    このコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    これといった原因は分かりませんが
    CSSブラウザリセットの影響も考えられますので、
    サンプルデータで読み込ませている「reset.css」を
    実装されているページに読み込んでみるか
    CSS内にスライダー部分の「margin」と「padding」の値を0にするように
    ———————————————
    .wideslider,
    .wideslider * {
    margin: 0;
    padding: 0;
    }
    ———————————————
    を追記してみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。

  • masaken | 2014.10.23 4:38

    はじめまして。
    ウィンドウ幅いっぱいのスライダーを探していたら辿り着きました。

    理想のスライダーで嬉しく思っています。

    同じ質問が出ていたら申し訳ございません。

    「prev.jpg」と「next.jpg」の位置をずらすことは可能でしょうか?

    例えばメインの真ん中の画像より左右50px離れた場所に設置などのような事です。

    もし可能でしたらご教授頂ければと思います。
    よろしくお願いします。

  • BlackFlag | 2014.10.25 23:23

    >masakenさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    「prev.jpg」と「next.jpg」の位置については
    スクリプト側ではなくCSSでの指定になりますので
    「.slider_prev」「.slider_next」の背景画像の位置などを調整してみてください。

    もしくは「prev.jpg」と「next.jpg」の画像ファイル自体に
    各左右に余白50pxを付けてしまう方法でも大丈夫かと思っております。

    お試しください。
    よろしくお願いします。

  • Love-hyde | 2014.11.27 15:34

    質問させて頂きたいのですがサムネイルを下に配置した際に、下記のようにサムネイルの横にNextとPrevのボタンを配置したいのですが可能でしょうか?

      < > □□□□□

  • BlackFlag | 2014.11.30 13:24

    >Love-hydeさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    とても嬉しく思っております。

    ご質問いただきました件についてですが
    その様なボタンを実装することも可能だと思いますが
    スクリプトを多少カスタマイズする必要があります。

    スクリプト内で「.pagination」の中に2つのボタンのソースを入れ
    prevボタンには「findPrev.click();」
    nextボタンには「findNext.click();」
    で実装させているスクリプトを
    それぞれ実行させることで動作すると思います。

    お試しください。
    よろしくお願いします。

  • swordfish | 2014.12.10 16:09

    はじめまして。
    すばらしいスクリプトですね。
    理想に近いものになっており、これをうまく活用したいと思っています。
    カスタマイズについてお伺いしたいのですが、
    オンマウス時にオートプレイを停止させることはできませんか?
    お忙しいところ恐縮ですが可能でしたらよろしくお願いします。

  • にゃんこ | 2014.12.12 17:19

    はじめまして。
    こちらの横100%スライダーをありがたく使わせて頂いているものです。

    ところでこちらのスライダーは1Pに複数設置した場合、
    2つめ以降のスライダーの自動スタートが効かない、という仕様だったかと思います。
    それは承知で複数設置させていただいたのですが、
    「1つ目のスライダーより2つ目のスライダーの方が表示画像枚数が多かった場合、
    1つ目のスライダーの画像が表示されない」
    という報告を受けました。同じ画像枚数だった場合には問題ないそうです。

    こちら、何か原因に思い当たる節はございますでしょうか?
    また、何か対策できる方法はありませんでしょうか?

    なかなかこちらと同じ仕様で表示できるスライダーが無く、
    できればこのままこちらのスライダーを使用したいので、
    お力をお借りできると助かります。

    お忙しいところ申し訳ございませんが、
    ご検討いただけますと幸いです。

    よろしくお願い申し上げます。

  • BlackFlag | 2014.12.14 1:12

    >swordfishさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    マウスオンでアニメーションを停止させるには
    スクリプト307行目あたりに
    ————————————
    targetObj.hover(function(){
    if(autoPlay == ’1’){clearInterval(wsSetTimer);}
    },function(){
    if(autoPlay == ’1’){wsTimer();}
    });
    ————————————
    この様な処理を追記すればいけるかと思います。

    参考までにサンプルファイルも用意しましたので
    必要であれば下記よりダウンロードしてみてください。
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/jQueryResponsiveFullWideSliderHoverStop.zip

    お試しください。
    よろしくお願いします。

  • BlackFlag | 2014.12.14 2:06

    >にゃんこさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただいた点について
    動作確認いたしました。

    原因に関してもなんとなく判明はしているのですが
    改修するには少々時間が掛かりそうなので
    ひとまずは1ページ内では一つの設置でお願い致します。。
    (プラグイン化しないと厳しいかもです。。)

    よろしくお願いします。

  • swordfish | 2014.12.16 12:06

    ありがとうございます、無事マウスオーバーで停止させることができました。
    おかげさまで重ねあわせで配置したメニューなどを止めることができました。

  • kage | 2015.01.05 17:25

    初めまして。
    ホームページを改良するに当たって、是非動きのあるものにチャレンジしてみたくなりました。
    色々と調べているうちにこちらのサイトにたどりつき、スライダーを有難く使用させて頂きました。

    100%とは言えませんが理想に近いものが出来、いざアップロードしてみますとその表示があまりにも遅いことに気づきました。
    ダウンロードさせて頂いたサンプルファイルでは、画面が開くと同時に猫の画像が現れます。
    私が作成したものはかなりの時間固まった後、スライドが始まる感じです。

    確かに本文にも大きめの画像を数多く使用していますから、全体として重いものになっているのは間違いないと思います。

    そこで、まず画像はPNG形式にアイコンもGIF形式に変換したうえで、大きさも小さくしました。
    ネットで調べたところ、セレクターはclassを使わずidを使った方が速いという記事がありましたので、それも変更してみました。
    それでも、あまり効果が出ません。

    猫の画像はjpeg形式でデーター量も私がスライダーに使用したものより重いようです。
    それでも瞬息で表示されます。

    どこに問題があるのでしょうか?

    お忙しい中、大変申し訳ございませんがご指摘頂けますと幸いです。
    何卒宜しくお願い致します。

  • BlackFlag | 2015.01.07 1:22

    >kageさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    動作の重さについてですが
    おそらくスライダー部分のスクリプト等の影響ではなく
    ページ内にYahooページのiframeやGoogleのカレンダーやMapなどが
    配置されている影響なのではないかと思っております。

    これらのサービスをページに読み込むと
    ロードにある程度の時間がかかってしまうので
    一旦、YahooページのiframeやGoogleのカレンダーやMapをページ内から外してみて
    表示速度がどうなるか試してみてはいかがでしょうか。

    当記事のスライダーは
    ページ内の全ての要素が読み込まれた後に
    実装されるように構成してあるので
    ページロードに時間がかかってしまうと
    その分、スライダーが表示されるのが遅くなってしまいます。

    よろしくお願いします。

  • kage | 2015.01.08 10:59

    早々のご返信ありがとうございました。
    早速、ご指示頂いたことを検証してみました。

    結果、一番必要性のないYahooページのiframeを外したことでかなり起動が速くなりました。
    これでしばらく様子を見ようと思います。

    本当に助かりました。
    ありがとうございました。

  • masaken | 2015.02.02 21:04

    2回目の投稿になります。
    わからない点がありましたので、投稿させて頂きました。
    よろしくお願いします。

    過去の投稿で画像と画像の間にスペースをあける場合は「.wideslider ul li img」にmarginを追加するという回答を参考に制作したところ、画像の右側が削られたかたちとなってしまいます。

    margin 10px;とすると画像の右側も10px分削られたかたちとなります。

    このような場合の解決方法がありましたらお答え頂ければと思います。

    大変お忙しい中と存じますがよろしくお願いします。

  • BlackFlag | 2015.02.04 1:44

    >masakenさん
    ご質問いただいた件についてですが
    画像のサイズを取得しながらレスポンシブ処理を行っているので
    ほかの方法だと厳しいかもしれません。

    画像自体に左右の余白を付けるなどで
    ご対応いただく形になるかと思っております。

    よろしくお願いします。

  • Rika | 2015.02.07 11:10

    はじめまして、Rikaと申します。
    ウィンドウ幅いっぱいのスライダー、活用させていただいております。
    素敵なスラーダーをありがとうございます。

    paginationの表示に関してご質問がございます。
    デフォルトでは四角形でページネーションを表示していますが
    四角形の箇所に数字を割り当てる事は可能でしょうか?

    対応の方法がございましたら、是非ご教授いただけると幸いです。
    宜しくお願いいたします。

  • BlackFlag | 2015.02.08 12:03

    >Rikaさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ページネーションに該当数字を追加するには
    スクリプト42行目で生成しているソース部分の
    </a>の手前で「’+(i+1)+’」として生成番号を追加することで実現できるかと思います。

    参考までにサンプルファイルを用意しましたので
    下記よりご確認ください。
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/indexPnNum.html

    お試しください。
    よろしくお願いします。

  • Rika | 2015.02.09 14:49

    ページネーションに関するご解答を早々に頂きましてありがとうございました。
    サンプルページまで制作して頂いて大変恐縮です。

    試したところ、数字が表示されました。
    CSSで見栄えを調整して奇麗に仕上がりました。
    おかげで、お客さまのご要望にお応えする事ができて大変嬉しいです。
    本当にありがとうございました!

  • ryo | 2015.03.23 11:35

    はじめまして、ryoと申します。
    私はホームページ作成に関して初心者で、スライドショーについて検索していたところ、こちらのブログ記事に辿り付きました。
    他の記事も読ませて頂きましたが、とてもありがたい情報ばかりで、感謝しきれません!

    こちらの記事のスライドショーに関して、分からない部分があり、1点質問させて頂きたいのですがよろしいでしょうか?
    こちらの記事のスライドショーを、このたび私が制作しているホームページに組み込みたいと考えております。
    サンプルページをダウンロードさせて頂き、そのソースを元に編集しておりました。
    スライドショー周りのレイアウトをある程度完成させた後、スライドショーの画像をこちらで用意した画像(slide_image.png)に差し替えた所、スライドショーのレイアウトが崩れ、スライドショー部分の画像が表示されずに白くなってしまいました。
    画像の差し替えをする際は、HTMLの他にも変更するべき点があるのでしょうか?
    お忙しいとは思いますが、何卒返信の方よろしくお願い致します。

  • BlackFlag | 2015.03.24 1:15

    >ryoさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実際に組み込まれているページを確認できないと何とも言えないのですが
    画像設置の際の注意点としては、記事内に書かせていただいているとおり
    「使用する(スライドさせる)画像は全て幅と高さを同サイズのものを使用する」という点になります。

    他に考えられることとしては
    CSSブラウザリセットの影響などもあるかと想定していますので
    サンプルデータで読み込ませている「reset.css」等も
    実装されているページに読み込んでみて
    事象が解消されるかお試しください。

    憶測での回答になってしまいますが
    よろしくお願いします。

  • アートマ | 2015.03.24 18:30

    はじめまして、アートマと申します。
    画面いっぱいのスライドショー、活用させて頂いております。
    本当に素晴らしいです!

    質問なのですが、■のページネーションそのものを消すにはどうしたらいいでしょうか?
    なにぶんプログラムに関してはド素人なもので…
    CSSをいじろうにもなかなか上手くいかず。

    消すのではなく、見えないように隠すやり方でも結構です。

    お教え頂ければ幸いです。

  • BlackFlag | 2015.03.26 1:12

    >アートマさん
    コメントありがとうございます。
    当記事のコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    ページネーションの非表示については
    要素そのものをソース上から消してしまうと全体の動きに支障が出るので
    CSSで非表示(見えなくする)にする形がよろしいかと思います。

    CSS内で「.pagination」の「z-index」の値を「0」にして
    「.wideslider_base」に対して「z-index」を「1」以上の値で追記することで
    画面上にページネーションは表示されなくなると思います。

    お試しください。
    よろしくお願いします。

  • けん | 2015.04.15 12:58

    はじめまして。
    けんと申します。

    画面いっぱいのスライダーを探しており、当記事にたどりつきまして、早速活用させていただきました。とても素晴らしいと感じております。

    ところが、どういうわけか左右のNEXT/BACK(矢印)ボタンが表示されなく困っております。
    画像サイズを「940×500」に変更しただけで、特に変更は加えていないのですがどこをどのように追記または変更して良いものかがわかりません。

    お手数ではございますが、左右のNEXT/BACKボタンを表示させるにはどのようにしたらよいのでしょうか。教えて頂けると助かります。

    なにとぞ、よろしくお願いいたします。

  • BlackFlag | 2015.04.18 20:57

    >けんさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実際に組み込まれているページを確認できないと何とも言えないのですが
    当記事からダウンロードできるサンプルデータを元に
    幅940pxに変更してみて動作を検証していただき
    再度、ご自身で実装されたデータのスクリプトを
    CSS等と併せて全体を確認してみてください。

    よろしくお願いします。

  • けん | 2015.05.12 17:57

    けんと申します。

    先日はスライダーの件について、
    ご丁寧に教えていただき誠にありがとうございました。

    おっしゃるとおり、CSSを見直したところ画像のURLが抜けていたことが原因でした。
    申し訳ございませんでした。

    それと、こちら様のサイトにもございますように、ある程度スクロールすると下からスッとフッターが出現するようにさせたいのですが、どのようにしたら良いのでしょうか?

    お忙しいところ、申し訳ございませんが教えて頂けませんでしょうか。

    何卒、よろしくお願いいたします。

  • BlackFlag | 2015.05.14 1:18

    >けんさん
    画像は正常に表示されたようで安心致しました。

    フッターの動作については
    スクロール値を見ながら、特定の位置でフッターのCSSを変化させて
    アニメーション制御させる構成になりますが、
    近々、同様の動作をこちらでも紹介させていただく予定です。

    よろしくお願いします。

  • PA | 2015.05.18 23:58

    初めまして、とても素晴らしいスライダーをありがとうございます。
    ありがたく使わせて頂いています。
    初心者で申し訳ないのですがご教授お願いします。
    PCではWindows・Macで綺麗に表示されているのですが、iPhoneで観るとスライドがズレてしまいます。
    いろいろ試したのですが、どうしても解決出来ませんでした。
    解決法があれば教えて頂けないでしょうか。

  • BlackFlag | 2015.05.20 2:20

    >PAさん
    コメントありがとうございます。

    とても素敵なデザインのWebページに
    当記事のコンテンツスライダースクリプトをご活用いただいている様で
    嬉しく思っております。

    iPhoneでの表示についてですが
    記載いただいたURLのソースを見る限り
    使用されているスライダーのスクリプトは
    レスポンシブに対応していないパターンのものかと思いますので
    当記事のレスポンシブに対応したパターンで実装してみていただけますでしょうか。

    お試しください。
    よろしくお願いします。

  • PA | 2015.05.25 17:36

    ご回答、ありがとうございます。
    お返事が遅くなってしまい申し訳ございません。

    ご指摘頂いたとおりレスポンシブに対応したものに変更したところ
    悩んでいたスライドの写真のズレが直りました。
    ありがとうございます。

    ところがPCでは問題ないのですが、やはりiPhoneで観ると
    スライドが画面の幅いっぱいにではなく左によってしまい
    右に空きができてしまいました。

    こちらもいろいろ試したのですが、どうしても解決できませんでした。

    お忙しいところ何度も申し訳ございませんが、
    解決法があれば教えて頂けないでしょうか。
    宜しくお願い致します。

  • んと | 2015.06.02 18:42

    はじめまして。
    自社のHPを作成中、とてもいいスライダーにめぐり合うことができました。
    ありがとうございます。

    初心者なので簡単なことなのかもしれないのですが質問させてください。
    ページネーションの形と色を変えたいのですが、どうすればいいのでしょうか?
    ご教授おねがいします。

  • BlackFlag | 2015.06.03 1:38

    >PAさん
    詳しく調べる時間が取れないのですが
    ページ全体の横幅が広めなので
    スクリプトの「minWidth」の値をページ幅に合わせたり
    viewportの調整などで解消できないでしょうか。

    憶測の回答になってしまい申し訳ありませんが
    お試しください。
    よろしくお願いします。

  • BlackFlag | 2015.06.03 1:41

    >んと さん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ページネーションの装飾については
    CSS側の「.pagination」と「.pagination a」の部分になりますので
    そちらを調整いただければと思います。
    ※スクリプト側は基本的には変更はありません。

    よろしくお願いします。

  • るり | 2015.06.07 15:09

    本当に素晴らしいサイトで、素人ながら毎日お勉強させて頂いております。
    いつもありがとうございます!!

    ありがたく使用させて頂き、プレビューでは問題なく動作いたしました。

    作りかけながらも試しにサーバーへ転送してみましたところ、
    スマホではスライドショーが問題なく反映されているのですが、なぜかPCになると表示されません・・・。
    PCの画面を縮めると見られたり、見られなくなったり・・・。

    本当に初心者で恥ずかしいのですが、ご教授よろしくお願い致します。
    (URLは非公開でお願いいたします。)

  • BlackFlag | 2015.06.11 0:50

    >るり さん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件について
    お知らせいただいたURLを見てみる限り
    スライダーはきちんと動作しているようでしたが
    その後、問題は解消されたということでしょうか・・・。

    もしまだ何か問題が生じていましたら
    ご連絡いただければと思います。

    よろしくお願いします。

  • よしかわ | 2015.06.16 13:12

    こんにちは、おせわになります。こちらのスライダー利用させて頂いております。
    ありがとうございます。

    1点、質問させていたけるでしょうか。
    サンプルだとhtmlに直接記述しておられましたが、jsを外部ファイルにして利用したいのです。
    ただ、ローカルだと問題ないのですが、サーバーにあげると動かなくてjsを読んでないようになります。
    $をjqueryにしたり、記述の場所を変更したり色々ためしたのですが、どうにもこうにもお手上げです

    書き方でなにか解決方法があれば、もしよかったらご教授頂けないでしょうか。

  • るり | 2015.06.16 14:06

    お返事頂いておりましたのに、返信が遅くなり申し訳ございませんでした!!

    試行錯誤しながら画像のサイズを1000pxに変えてみたところ、無事にデスクトップからも動くようになりました。

    素人でも内容がわかりやすく、ステキなスライダーを使うことができて感謝です・・・。

    これからも拝見させて頂き、たくさんお勉強させていただきます。
    本当にありがとうございました!!

  • BlackFlag | 2015.06.17 0:59

    >よしかわさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    当スクリプトはそのまま外部ファイル化していただければ動作します。

    ローカルで動いてサーバにアップすると動かなくなる場合は
    HTMLから読み込ませているファイル名と実際のファイル名の
    大文字小文字などファイル名の指定が正確でない可能性がありますので
    まずはそちらをご確認いただければと思います。

    よろしくお願いします。

  • BlackFlag | 2015.06.17 1:01

    >るり さん
    問題も解決したようで安心致しました。

    当ブログでは他にも色々とスクリプトの紹介をさせていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • るり | 2015.06.21 18:48

    何度も質問ばかりで申し訳ございません!!

    もうひとつ既存のHPを編集しており、
    そちらにもこのコンテンツスライダーをぜひ使わせて頂きたく思っております。

    しかしそちらはCSSなどの構成が異なっているためなのか、
    どこにHTMLの記述を入れてみてもコンテンツスライダーがページの一番上にあがってしまい、ヘッダーなどに被ってしまいます。。(スライダーは問題なく動作します。)

    手順通りにはできていると思うのですが・・・原因として考えられるものは何でしょうか?
    わかりにくい説明で申し訳ありませんが、ご教授頂ければと思います。。

  • BlackFlag | 2015.06.23 0:08

    >るり さん
    その様な現象が起こったことがないので
    原因も不明なのですが、CSSの構成部分の問題ではないかと感じています。

    実際の画面を見ない限り何とも言えないので
    テストページ等お知らせいただければ調査もできるかと思います。

    よろしくお願いします。

  • るり | 2015.06.23 11:30

    お返事ありがとうございます!!
    いつもお世話になっております。

    コンテンツスライダーがページの一番上にあがってしまうという件です。

    きっとCSSの問題なのだろうとは思うのですが、仕組みを熟知しておらずでどうしても原因がわかりません。。
    テストのURLを載せておりますので、お手数ですがご覧頂ければありがたいです。。
    (URLは非公開でお願いいたします。)

    面倒お掛け致しますが、どうぞよろしくお願いいたします。

  • BlackFlag | 2015.06.28 10:18

    >るり さん
    画面確認させていただきましたが、
    CSSがきちんと読み込まれていない可能性がありますので
    現状の「bootstrap.css」の一番下に書かれているスライダー用のCSSを
    「style.css」の一番下に移動してみてはいかがでしょうか。

    その他、スライダー以外のページ内の要素の
    回り込み解除などがきちんとされているかご確認ください。

    スクリプト動作はしているので
    やはりCSSの問題になるかと思います。

    よろしくお願いします。

  • るり | 2015.06.29 10:46

    いつもお世話になっております。
    ご教授頂いた通りに変えてみたところ、無事に動作いたしました!

    ややこしい相談でご面倒お掛けいたしまして申し訳ございません。。
    本当にありがとうございます!!
    今後もこちらのサイトを見てお勉強させていただきます!

    ありがとうございました!

  • ジン | 2015.07.24 19:57

    こんにちは。これだ!というスライダーに出会えました。
    初心者なのです。ページを作成し、プラス、上部に固定メニューを付けました。
    左右の画像にマウスオーバーすると画像が少し白っぽくなってスライダー画像のnextなどのスイッチになっていますね。そのメニューにポインタを持っていくとマウスオーバー時の白っぽい部分がメニューの上に表示されてしまいメニューが選べない状態になってしまいます。どうしたらよいでしょうか?よろしくお願いします。

  • BlackFlag | 2015.07.25 12:04

    >ジンさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    実際の画面を確認させていただかない限り
    事象がよく分からないのですが
    上部の固定メニューの重なり具合いの関係なのではないかと感じています。

    スライダーの左右メニューボタンは「z-index」を「100」
    ページネーションは「200」に設定してあるので
    追加した上部固定メニューの「z-index」を「300」とかに
    設定してみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。

  • ジン | 2015.07.28 8:18

    OKです!!! できました! うれしいです。突然の質問に答えていただき本当にありがとうございます。これからも学習していきたいと思います。よろしくお願いします。

  • アレコ | 2015.08.27 1:00

    はじめまして。
    画像内にキャプション文字列を表示したいのですが、表示可能でしょうか?
    画像の下の方にグレーっぽい背景帯の上に白抜き文字で表示するイメージです。

    よろしくお願いいたします。

  • BlackFlag | 2015.08.27 1:46

    >アレコさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    画像内にキャプション要素を追加するのは
    スクリプト動作には特に影響を与えずに
    HTMLとCSSの追記で実装可能です。

    画像の上にキャプション要素を重ねるような構成で
    お試しいただければと思います。

    よろしくお願いします。

  • けん | 2015.09.08 22:57

    けんと申します。
    先日はスライダーの件でお世話になりました。

    度々申し訳ないのですが、一点だけご質問よろしいでしょうか?

    記事にございますスライダーをありがたく使わせているのですが、スライドしてきたメインの画像の上にマウスポインタを当てている時だけスライド画像が停止し、マウスポインタを外したら再度動かすようにしたいのですが、そのような事は可能でしょうか?
    可能のようでしたらどのようにしたら良いのでしょうか?

    お忙しいところ申し訳ございませんが、教えていただけないでしょうか。
    何卒よろしくお願いいたします。

  • BlackFlag | 2015.09.14 2:02

    >けんさん
    コメントありがとうございます。
    当記事のコンテンツスライダーも活用いただいている様で
    嬉しく思っております。

    マウスオンでアニメーションを停止させるサンプルは以前用意しており、
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/jQueryResponsiveFullWideSliderHoverStop.zip
    こちらからデータをダウンロードすることが可能になっております。

    スクリプトの変更箇所は307行目あたりに
    ————————————
    targetObj.hover(function(){
    if(autoPlay == ’1’){clearInterval(wsSetTimer);}
    },function(){
    if(autoPlay == ’1’){wsTimer();}
    });
    ————————————
    この様な処理を追記し、
    スライダーの各ボタンクリック時につけていた
    ループアニメーション動作を制御を削除してあります。

    スライダーのメインエリアではなく
    スライダー全体にマウスオーバーでストップさせる動作がついていますが
    こちらをご参照いただければと思っております。

    お試しください。
    よろしくお願いします。

  • けん | 2015.09.15 10:10

    いつもお世話になっております。
    けんと申します。

    この度はコンテンツスライダーについての質問に対し、
    とても分かり易いご回答をいただき、本当に感謝しております。

    教えていただいた通りにスクリプトを変更しましたところ、
    無事に動作しました。
    本当にありがとうございました。

    これからもBlackFlag様の記事を参考に勉強したいと思っております。

    また、わからないことなど出てきてた時はご質問してしまうと思いますが、
    その際は、どうぞよろしくお願いいたします。

    この度は本当にありがとうございました。

    今後とも、どうぞよろしくお願いいたします。

    けん

  • ひで | 2015.09.19 18:46

    はじめまして。

    とても素晴らしいスライダーです。
    利用させていただいており、大変重宝しております。
    ありがとうございます!

    今回、ちょっと自分では解決できない問題がありまして連絡させていただきました。

    記載したurlで使用させていただいているのですが、iPadにPCのサイトを表示させ、全体の幅をブラウザの幅にあわせたところ、スライダーの画像が左に寄ってしまい画像の大きさも小さくなってしまいます。
    ※PCとスマホはブレイクポイントを設けておりますが、タブレットについては設けておりません。

    全体の幅は1140pxなのですが、スライダーの画像はデバイスの幅の768pxになってしまってるようです…

    画像をコンテンツの中心に持ってくるよう調整したいのですがどうしたらよいでしょうか…
    可能であれば画像の幅も調整したく思います。

    javaについては素人です…
    お忙しいところ大変申し訳ありませんが、ご教授頂けますと幸いです。

    何とぞよろしくお願いいたします。

  • BlackFlag | 2015.09.23 11:17

    >ひでさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    実装されているページをタブレットで確認できてはいないのですが
    おそらくviewport設定の問題ではないかと考えております。

    HTMLに記述しているviewport設定を
    タブレットでも最適に表示されるように指定してみてはいかがでしょうか。

    参考までにスマートフォンとタブレットで
    viewportを切り替える方法などもありますので
    ——————————————–
    ・jQueryでスマートフォンとタブレットでviewportを切り替える実験
    http://black-flag.net/jquery/20141216-5474.html
    ——————————————–
    こちらの方法などもお試しいただけると幸いです。

    憶測での回答になってしまい申し訳ありませんが
    よろしくお願いします。

  • ひで | 2015.10.10 22:51

    BlackFlag様

    お礼が遅くなってしまいまして、大変申し訳ありません。

    お忙しい中、ご親切に回答いただきましてありがとうございます。

    viewport設定なのですね。
    これであれば自分でも設定できそうです。

    とても参考になりました。
    BlackFlag様のページはとても勉強になります。
    この様なページを公開されていることに感謝いたします。

    今後も色々と勉強させていただきたいと思います。
    この度は本当にありがとうございました。

    何卒よろしくお願いいたします。

  • Buddy | 2015.10.20 14:35

    BlackFlag 様

    素敵なスライダーをWEBに取り込みさせて頂いています。

    質問ですが、メイン画像を増やして表示する事は出来たのですが(デフォルトでは5枚の画像)、
    サムネイル画像(下の30px×30px画像)※ .pagination a.pn1~5の画像は表示されますが、6枚目以降の画像が表示されないのですが、どのようにしたら、表示する事が可能でしょうか?
    ちなみに、9枚の画像を表示させたいと思っています。

    現在、制作中の為、ローカルで確認しています。

    ご伝授をよろしくお願いします。

  • BlackFlag | 2015.10.24 22:31

    >Buddyさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    サムネイル画像については
    CSS側で背景画像で指定する構成になっておりますので
    サンプルのCSSファイルをご確認いただき
    ページネーションのクラスを追加して
    背景画像を指定してみてください。

    よろしくお願いします。

  • のりぴょん | 2015.12.10 8:27

    おはようございます。
    早速採用してみたのですが、どうしてかわからないことがあります。
    URL に書いてある試作サイトですが、左右の切り替えボタンの位置がずれている (ウィンドウの中央に来ない) し、ウィンドウサイズを変えると、どんどんずれていきます。
    ブラウザの更新をしても、やはり、位置がずれています。
    レスポンシブに採用しているのですが、レスポンシブになっていないようです。(固定になってる… ?)
    私のサイトの構築方法が間違っているのか、よくわからないので、なにかヒントをいただけたら嬉しいです。
    用途は、リンク集のスクロール選択です。

  • BlackFlag | 2015.12.12 10:30

    >のりぴょんさん
    コメントありがとうございます。
    当記事のコンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当記事のスライダーは基本的に画面幅めいっぱいの状態から
    サイズ等を計算して実装するスライダーになっているので
    幅が固定されたエリアにはめ込んでしまうと計算が合わなくなり
    ズレが生じることになってしまいます。

    スライダーを実装するエリアは画面めいっぱいに幅を広げるなど
    構成の変更を検討してみてください。

    併せて、おそらくページ全体で
    CSSのブラウザリセットがされていないと思いますので
    きちんとCSSのブラウザリセットを組み込むか、
    スライダー部分の「margin」と「padding」の値を0にするように
    ———————————————
    .wideslider,
    .wideslider * {
    margin: 0;
    padding: 0;
    }
    ———————————————
    をCSSに追記してみてください。

    お試しください。
    よろしくお願いします。

  • miyajimac | 2016.01.07 11:36

    はじめまして。
    あけましておめでとうございます。

    BiNDというアプリケーションでWebを作成いていますが、搭載されているスライダーがイマイチなので、なにかカッコイイものはないかと探していた時、BlackFlagさんのサイトにたどり着きました。
    欲しかったスライダーに出会え、大変うれしく思っています。
    早速使わせていただいたところ、SafariやGoogle Chromeの場合問題なく表示されるのですが、なぜかFirefoxの場合、真ん中のメイン画像にポインタを置くと、画像が白くなってしまいます。(いずれもMac環境です。IEは試していません)
    投稿の際に記させていただいたアドレスが、そのテストページとなります。
    お忙しい中恐縮ですが、もしなんらかの原因がわかりましたら、教えていただけないでしょうか?
    たぶんBiNDのプログラムとの相性が原因かと思います。でも、SafariやGoogle Chromeだと問題ないので。
    長文によるご質問、大変失礼いたしました。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2016.01.09 10:02

    >miyajimacさん
    あけましておめでとうございます。

    コメントありがとうございます。
    当コンテンツスライダーをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    ページ内で読み込んでいる他のCSS内にて
    すべてのリンク<a>タグに対して
    hover時にopacityを変化させる指定が入っている
    影響ではないかと思っています。

    このコンテンツスライダー内では
    その効果を付けないように
    ———————–
    .wideslider a:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)!important;
    opacity: 1!important;
    filter: alpha(opacity=100)!important;
    }
    ———————–
    をCSSに追記してみてはいかがでしょうか。

    憶測での回答になってしまいますが
    お試しください。
    よろしくお願いします。

  • miyajimac | 2016.01.09 13:48

    BlackFlagさん
    こんにちは。

    このたびはありがとうございました!
    ご回答いただいたとおりCSSに追記しましたら、無事解決いたしました。
    本当に助かりました。
    また機会がありましたら、BlackFlagさんのいろいろなプログラムに挑戦したいと思っています。

  • PANRUN | 2016.01.27 16:26

    はめまして、画面いっぱいに表示され、サムネイルも表示されるスライダーを探しておりまして、
    こちらのサイトにたどり着き、希望通りのスライダーでありがたく使わせて頂きました。
    ありがとうございます。

    Javascript初心者で大変申し訳ないのですがご教授お願い致します。
    bootstrap3とこちらのスライダーを同時に導入しているのですが、
    bootstrap3の「dropdown」の機能を使った際の現象です。

    「dropdown」のメニューボタンを押しプルダウンメニューを開いた状態で
    スライダーが自動的に切替る瞬間に「dropdown」の開いているプルダウンメニューが閉じてしまいます。

    初めはclass名の重複か、Javascriptによってclass名が書き換えられているか、
    何かでリセットされているのかと推測し、調整してみたのですが解決せず、ご質問差し上げる形となりました。
    対象サイトは下記となります。(URLは非公開でお願い致します。)

    大変ご面倒をお掛け致します。ご教授頂けないでしょうか。
    どうぞ宜しくお願い致します。

  • masa | 2016.01.29 17:36

    いつもスライダーを利用させていただいております。
    制作いただきありがとう御座います。

    スマホ、タブレットで表示した時にslider_prev slider_nextの矢印が消えてしまいます。
    レスポンシブに対応させない方法はあるのでしょうか?

    お忙しい所恐れいりますがご連絡をお待ちしております。

  • BlackFlag | 2016.02.06 10:58

    >PANRUNさん
    コメントありがとうございます。
    返信遅くなりました…

    ご質問いただきました件についてですが
    bootstrapの動作構成等に関して私の方では保証できないのですが
    確認させていただいたところ、
    「dropdown」のメニューボタンを押してプルダウンメニューを開いた状態で
    画面上のどこをクリックしても(スライダー以外のところでも)
    開いているプルダウンメニューが閉じる構成になっているようでした。

    bootstrap上でその動作を無効にするオプションがあれば
    解消できるかと思っております。

    もしくは「bootstrap.js」の903行目あたり
    「.on(’click.bs.dropdown.data-api’, clearMenus)」
    の一行がその動作にあたる部分だと思われますので
    この一行を削除してみるなどお試しいただければと思っております。

    よろしくお願いします。

  • BlackFlag | 2016.02.06 11:03

    >masaさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    左右のボタンに関してはスマホ、タブレットでは非表示の構成にしておりますが
    当記事タイプのスライダーでレスポンシブではないパターンは

    ・jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
    http://black-flag.net/jquery/20121219-4407.html

    こちらで用意させていただいておりますので
    併せてご確認いただければと思っております。

    よろしくお願いします。

  • PANRUN | 2016.02.06 23:14

    BlackFlagさん

    お忙しい中ご回答ありがとうございます。
    おっしゃる通り、「bootstrap.js」の903行目あたり
    「.on(’click.bs.dropdown.data-api’, clearMenus)」を
    コメントアウトしたところ閉じなくなりました。
    ただ、機能をコメントアウトしたので当然ですが
    画面上のどこをクリックしてもプルダウンメニューが閉じなくなります。

    この部分はこちらのスライダーのどの部分に影響しているのでしょうか?
    大変お手数をお掛け致します。
    ご教授をお願い致します。

  • BlackFlag | 2016.02.11 12:14

    >PANRUNさん

    「画面上のどこをクリックしてもプルダウンメニューが閉じなくなります。」
    画面の適当な部分をクリックしたらプルダウンが閉じる、
    という動作は少々違和感を感じますが
    この仕様は必要ということでしょうか・・・

    スライダーの自動再生はスクリプト141行目にて
    Nextボタンをクリックさせていますので、
    この部分にNextボタンの動作をコピーすることで
    解消できるかもしれません・・・

    お試しください。
    よろしくお願いします。

  • PANRUN | 2016.02.14 12:02

    BlackFlagさん

    ご回答ありがとうございます。
    上記ヒントを元に試してみます。

  • kamui | 2016.03.25 16:24

    お世話になります。

    こちらのスライダー、要件にぴったりでしたのありがたく組み込みを行っております!
    jsから出力されているであるページネーションのdivをwideslider外にもって行きたいと考えているのですが、こちらはjsを変更する必要がありますでしょうか。

  • BlackFlag | 2016.04.02 10:46

    >kamuiさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ページネーションのdivはwidesliderの子要素として構成しているので
    外に出す際にはスクリプト構成を変える必要があります。

    スクリプト36行目のページネーションを入れ込む位置を変更し、
    47行目の対象とするページネーションの指定を変える必要があるかと思います。

    お試しください。
    よろしくお願いします。

  • nyanco | 2016.06.02 14:57

    はじめまして。
    大変使いやすいスクリプトの提供ありがとうございます。

    こちらのスライダーのprevとnextボタンの位置なのですが、真ん中のメイン画像の上に持ってくることは可能でしょうか?
    位置をずらすと真ん中の画像の下にもぐりこんでしまうので、色々いじってみましたがうまくいかず。。

    ご教授いただければ幸いです。

  • BlackFlag | 2016.06.05 10:21

    >nyancoさん
    コメントありがとうございます。
    当記事のコンテンツスライダーを活用いただいている様で
    嬉しく思っております。

    ご質問いただきた点についてですが
    どのような画面構成で実装しようとされているか把握できていないのですが
    左右のボタンはCSSの「left」や「right」の値によって調整できるかと思います。

    CSSの「left」や「right」を「-(マイナス)」の値ではなく
    0以上の値で「!important」を使って指定してみていただければ
    画像の下にもぐりこまずに調整できるかと思います。

    お試しください。
    よろしくお願いします。

  • Kit | 2016.12.23 5:41

    お世話になります。

    以前から参考にさせて頂いてました。
    仕事で下記のようなスライダー作成の依頼を受けました。

    http://www.buyma.com

    こちらのページにあるサンプルを使ってある程度まではできたのですが
    スライダーと連動するボタンのところで詰まってしまいました。

    JQによって
    paginationのdivが作成されておりますが
    それを省き、htmlに記述した
    idがslider_thumbのdivで連動させたいと思っております。

    可能でしょうか?

    もし可能でしたらどのようにしたら参考サイトのようなスライダーができるのか
    ご教示頂けたら幸いです。

    現状で作成しているデーターを添付します。
    下記のサイトよりダウンロードしてご確認ください。

    大変お手間をとらせてしまい恐縮ですが
    色々と調べても解決ができないかったのでお力を貸してください。

    http://1.gigafile.nu/1230-gae9275a1788eaac2e7f6748ce8d6692e

  • BlackFlag | 2016.12.27 10:32

    >Kitさん
    コメントありがとうございます。
    当記事のスライダースクリプトを活用いただいている様で
    嬉しく思っております。

    実装されようとしている仕様でのスライダー動作にするには
    ページネーションの生成箇所およびアクティブ状態の判別処理などの
    調整が必要になるかと思います。

    お送りいただいたデータをこちらで少し調整したものを用意させていただきましたので
    下記URLよりダウンロードしてみてください。

    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/Kit_slider161227.zip

    HTMLおよびCSSとスクリプト部分それぞれ調整してありますので
    ご参考にしていただければと思います。

    よろしくお願いします。

  • しかまる | 2017.01.27 14:54

    コチラのスライダーがとてもかっこよく
    利用させていただいております。

    初心者なのですが、ページネーション部分の幅を狭くして
    画像部分を広く(1200px程度)したいと思っております。

    control.js内のbaseWidthを 1200としておりますが
    幅1200pxの写真を入れると大体900px前後での表示になってしまいます。

    なぜなのでしょうか?
    ご教示よろしくお願いいたいます。

  • BlackFlag | 2017.01.27 20:01

    >しかまるさん
    コメントありがとうございます。
    当スライダースクリプトを活用いただいている様で
    うれしく思っております。

    実際に実装されているページを見せていただかないと
    なんとも判断ができないのですが
    画像のサイズは1200pxでも動作することは確認済みです。

    基本的にスライドで使用する画像は
    すべて同じサイズでないといけないのですが
    使用されている画像のサイズを
    再度確認してみていただけたらと思います。

    よろしくお願いします。

  • ruri | 2017.05.15 23:20

    こんにちは。とても使いやすいスライダーでよく利用させて頂いております。
    ありがとうございます。
    さて、図々しい質問で恐縮なのですが、
    videoタグで動画を埋め込みたく、動画の静止画は表示されるのですが動画自体のautoplayが実行されず悩んでおります。
    こちらは画像のみのスライダーなのでしょうか。

  • BlackFlag | 2017.05.21 10:27

    >ruriさん
    コメントありがとうございます。
    当記事のスライダースクリプトを活用いただいている様で
    うれしく思っております。

    videoタグの使用については
    もともと想定しておりませんでしたが
    「autoplay」は初期の状態が非表示状態の要素には
    正常に動作しなかったような気がしていますので
    ページの読み込みが完了した後に、
    「.mainActive」内のvideoタグに対して
    「play()」メソッドを使って再生させるような
    構成にしてみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner