最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。
背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部(ページヘッダー)にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。

jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法

少々言葉では説明しずらいのでまず動作サンプルから。

「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示

ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。

スライドショー全体はブラウザサイズを変化させてもウィンドウの幅と高さに合わせて伸縮する構成になっており、スクロールがページ最上部にある場合に画面めいっぱいで収まる形になっています。

このフルスクリーンスライドショーの全体構成について、まずはHTMLから。

◆HTML
<div id="container">

<div class="fullSlideShow">
<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><!-- /.fullSlideShow -->

<div class="wrapper">
<h1>jQuery Responsive FullWide SlideShow</h1>

<div class="contents">
<p>ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。ここからコンテンツエリア。これはダミーテキストです。</p>

 ・
 ・
 ・

</div><!-- /.contents -->

<small>COPYRIGHT &copy; <a href="https://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</small>
</div><!-- /.wrapper -->

</div><!-- /#container -->

フルスクリーンスライドショーを実装するHTML部分は<div class=”fullSlideShow”>で囲われた部分のみとなり、その他の部分はサンプル画面を生成するサンプル要素になります。

サンプルでは5枚の画像を<li>を5つ並べて切り替えています。
表示個数を増減するには<li>を増やしたり減らしたりするだけになっています。

<li>が一つだけの場合はスライドショー機能は動作せずに静止画像一枚がフルスクリーンで表示されます。

これに対してCSSは以下の様になっています。

◆CSS
#container {
	width: 100%;
	text-align: center;
}

/* fullSlideShow
--------------------------- */
.fullSlideShow {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.fullSlideShow ul {
	top: 50%;
	left: 50%;
	width: 100%;
	position: fixed; /* absolute or fixed */
	overflow: hidden;
}
.fullSlideShow ul li {
	top: 0;
	left: 0;
	width: 100%;
	display: none;
	position: absolute;
}
.fullSlideShow ul li img {
	width: 100%;
}


/* SideNavi
------------------------- */
.fullSlideShow .btnPrev,
.fullSlideShow .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: fixed; /* absolute or fixed */
    z-index: 105;
}
.fullSlideShow .btnPrev {
    left: 10px;
    background: transparent url(../img/btnPrev.png) no-repeat center center;
}
.fullSlideShow .btnNext {
    right: 10px;
    background: transparent url(../img/btnNext.png) no-repeat center center;
}


/* PagiNation
--------------------------- */
.pagiNation {
	bottom: 30px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: fixed; /* absolute or fixed */
	z-index: 110; /* 非表示にする場合は「90」以下に */
 	visibility: visible; /* 非表示にする場合は「hidden」に */
}

.pagiNation a {
	margin: 0 5px;
	width: 20px;
	height: 20px;
	display: inline-block;
	overflow: hidden;
	background: #000;
}
.pagiNation a.pnActive {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* Wrapper
--------------------------- */
#wrapper {
	width: 100%;
	text-align: left;
	background: #fff;
	position: relative;
	z-index: 120;
}

.contents {
	padding: 30px 50px 50px 50px;
}
.contents p {
	padding-bottom: 3em;
	line-height: 180%;
}

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

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

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

スライドショーから後に続くコンテンツ要素(サンプルで言う「#wrapper」)に対しては「background: #fff;」「position: relative;」「z-index: 120;」は必須となっております。(背景色に関しては任意の色や画像で可)

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

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	setElm = $('.fullSlideShow');
	fadeSpeed = 1000;
	switchDelay = 5000;
	easing = 'linear';
	sideNavi = 'on'; // 'on' or 'off'
	sideHide = 'hide'; // 'hide' or 'show'
	naviOpc = 0.5;
	pnOpacity = 0.5;

	ua = navigator.userAgent;

	$(window).load(function(){
		setElm.each(function(){
			var targetObj = $(this),
			findUl = targetObj.find('ul'),
			findLi = findUl.find('li'),
			findLiCount = findLi.length,
			findLiFirst = findUl.find('li:first');

			findLi.each(function(i){
				$(this).attr('class','viewList' + (i + 1).toString());
			});

			findLi.css({display:'block',opacity:'0',zIndex:'99'});
			findLiFirst.addClass('mainActive').css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

			if(findLiCount > 1){
				// ページネーションSET
				var pagination = $('<div class="pagiNation"></div>');
				targetObj.append(pagination);

				findLi.each(function(i){
					pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
				});

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

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

				pnPoint.click(function(){
					clearInterval(setAutoTimer);
					var setNum = pnPoint.index(this),
					showCont = setNum+1;
					findUl.find('.viewList' + (showCont)).siblings().removeClass('mainActive').stop().animate({opacity:'0'},fadeSpeed,function(){$(this).css({zIndex:'99'});});
					findUl.find('.viewList' + (showCont)).addClass('mainActive').stop().animate({opacity:'1'},fadeSpeed,function(){$(this).css({zIndex:'100'});});
					pnPoint.removeClass('pnActive');
					$(this).addClass('pnActive');
					fadeTimer();
				});


				// ボタン移動動作
				function switchNext(){
					var setActive = pagination.find('.pnActive');
					setActive.each(function(){
						var pnLengh = pnPoint.length,
						pnIndex = pnPoint.index(this),
						pnCount = pnIndex+1;

						if(pnLengh == pnCount){
							pnFirst.click();
						} else {
							$(this).next('a').click();
						}
					});
				}
				function switchPrev(){
					var setActive = pagination.find('.pnActive');
					setActive.each(function(){
						var pnLengh = pnPoint.length,
						pnIndex = pnPoint.index(this),
						pnCount = pnIndex+1;

						if(1 == pnCount){
							pnLast.click();
						} else {
							$(this).prev('a').click();
						}
					});
				}

				function fadeTimer(){
					setAutoTimer = setInterval(function(){
						switchNext();
					},switchDelay);
				}
				fadeTimer();

				// サイドナビボタン(有り無し)
				if(sideNavi == 'on'){
					targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
					var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');

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

					if(sideHide == 'hide'){
						if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
							btnPrevNext.css({visibility:'visible'});
						} else {
							btnPrevNext.css({visibility:'hidden'});
							targetObj.hover(function(){
								btnPrevNext.css({visibility:'visible'});
							},function(){
								btnPrevNext.css({visibility:'hidden'});
							});
						}
					}

					btnPrev.click(function(){switchPrev();});
					btnNext.click(function(){switchNext();});
				}
			}

			// メイン画像をベースにエリアの幅と高さを設定
			var setLiImg = findLi.find('img'),
			baseWidth = setLiImg.width(),
			baseHeight = setLiImg.height(),
			selfWH = baseWidth / baseHeight;

			// フルスクリーン(レスポンシブ)動作メイン
			function setArea(){
				var wdWidth = $(window).width(),
				wdHeight = $(window).height(),
				rwdHeight = wdWidth / selfWH;

				if(rwdHeight < $(window).height()){
					rwdHeight = $(window).height();
					wdWidth = rwdHeight * selfWH;
				}
				targetObj.css({height:wdHeight});
				findUl.css({marginTop:-rwdHeight/2,marginLeft:-wdWidth/2,width:wdWidth,height:rwdHeight});
				findLi.css({height:rwdHeight});
			}
			$(window).resize(function(){setArea();}).resize();

			$('body').css({visibility:'visible'});
		});
	});
});
</script>

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

setElm = $(‘.fullSlideShow’); フルスクリーンスライドショー全体を囲うブロック要素(IDでも可)
fadeSpeed = 1000; フェードアニメーションスピード
switchDelay = 5000; スライドアニメーション待機時間
easing = ‘linear’; スライドする際のイージング
sideNavi = ‘on’; 左右NEXT/BACKの表示/非表示(非表示の場合は「off」等)
sideHide = ‘hide’; 左右NEXT/BACKのロールオーバーで表示切り替えON/OFF(常に表示させる場合は「show」等)
naviOpc = 0.5; 左右NEXT/BACKの透過度
pnOpacity = 0.5; ページネーションボタンの透過度

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

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

スライドショーの左右にあるNEXT/BACKボタンは「sideNavi」の値を「’on’」や「’off’」とすることで表示/非表示を切り替えることができます。
(記述は「off」でなくても「on」じゃなければ何でもいいです・・・)

表示したNEXT/BACKボタンをスライドショーエリアにカーソルが乗った時(ロールオーバー)のみ表示させるようにするには「sideHide」を「’hide’」とします。
常にボタンを表示させるにはここの値は「’show’」とします。
(記述は「show」でなくても「hide」じゃなければ何でもいいです・・・)

上記で紹介したサンプルでは、スライドショー内に左右のボタンやページネーションをつけてありますが、それらを省いて画像がクロスフェードするだけのシンプルな形でのスライドショーを実装する場合は次の様な形になります。

画像がクロスフェードするだけのシンプルなスライドショーで実装する

「画像がクロスフェードするだけのシンプルなスライドショーで実装する」サンプルを別枠で表示

こちらのパターンではページ最上部のフルスクリーンスライドショーには左右のボタンやページネーションは実装しない構成で画像がクロスフェードするだけのシンプルなスライドショーになっています。

全体構成については、HTMLはそのまま、CSS側では「.pagiNation」の「z-index」と「visibility」の値を非表示にする設定に変更します。

◆CSS
/* PagiNation
--------------------------- */
.pagiNation {
	bottom: 30px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: fixed; /* absolute or fixed */
	z-index: 90; /* 非表示にする場合は「90」以下に */
 	visibility: hidden; /* 非表示にする場合は「hidden」に */
}

スクリプト側では開始部分の設定値にて「sideNavi」を「’off’」にしておきます。

以上の変更で左右のボタンやページネーションをつけない形でのフルスクリーンスライドショーが実装可能になります。

最後に、ページ上部に配置するフルスクリーンスライドショーを位置固定せずにユーザーのスクロール動作に合わせて、上にスクロールしていくパターンのサンプルについて。

スライドショーをページ上部に固定させずに実装する

「スライドショーをページ上部に固定させずに実装する」サンプルを別枠で表示

このパターンではページ最上部に設置してあるフルスクリーンスライドショーはページをスクロールすることによって位置が固定されることなくコンテンツ要素と一緒に上へスクロールされるようになっています。

全体構成については、HTMLとスクリプトはそのままで、CSS側で
「.fullSlideShow ul」
「.fullSlideShow .btnPrev,.fullSlideShow .btnNext」
「.pagiNation」
上記の「position」の値を「absolute」に変更します。

◆CSS
.fullSlideShow ul {
	top: 50%;
	left: 50%;
	width: 100%;
	position: absolute; /* absolute or fixed */
	overflow: hidden;
}

.fullSlideShow .btnPrev,
.fullSlideShow .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute; /* absolute or fixed */
    z-index: 105;
}

.pagiNation {
	bottom: 30px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute; /* absolute or fixed */
	z-index: 110; /* 非表示にする場合は「90」以下に */
 	visibility: visible; /* 非表示にする場合は「hidden」に */
}

以上の3パターンにてページ最上部にフルスクリーンスライドショーを実装する方法の紹介でした。

各サンプルではただ画像だけをクロスフェードで切り替えるだけのスライドショーになっていますが、その上(前面)にロゴ画像やメニューボタンなどを被せる形で入れ込むことで、最近「ヒーローヘッダー」と呼ばれるパーツとして実装することも可能かと思っています。

ページ最上部に固定したフルスクリーンスライドショーを実装する際にぜひ。。。

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

SHARE

Comments (48)

  • xyz | 2014.11.29 10:42

    はじめまして。

    いつもブログを拝見させていただき勉強させていただいております。

    今こちらのページのスライドショースクリプト参考にさせていただいており、
    大きなモニターや、縦長のモニターの時には設定した高さで上限を設けたいと思い
    cssでのmax-heightなどを設定したのですが、上手く行かず、、、

    ウィンドウサイズの高さの上限を設定し、
    それ以上をお越える場合には全画面表示ではなく
    高さを設定した上限の値に固定することは可能でしょうか??

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

  • xyz | 2014.11.29 11:17

    すいません。「高さの上限」無事解決いたしました!
    ありがとうございます。

  • BlackFlag | 2014.11.30 13:27

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

    ご質問いただきました件について
    無事解決されたようで安心致しました。

    また何かありましたら
    ご連絡くださいませ。

    よろしくお願いします。

  • xyz | 2014.12.18 15:50

    返答ありがとうございます。

    また、度々すいません。
    現在制作のサイトにてjqueryにてページ全体を包むようなローディングを設置し
    そのあとにこちらのスライドショーを表示したいと考えております。

    プラグインとして簡単に読み込んで使うような方法ができればと思っています。
    簡単に方法をお教え頂けますと幸いです。

    $.fn.hoge = function() {
    }

    など試しているのですが、上手く呼び出せないでいます。
    素人レベルで大変お手数ですが、、

    宜しくお願い致します。

  • BlackFlag | 2014.12.20 1:17

    >xyzさん
    スライドスクリプトを何らかのアクションで呼び出す際には
    スクリプト16行目からの括弧
    ————————————————
    $(window).load(function(){
      ・
      ・
      ・
    });
    ————————————————
    を任意の関数等に変更して
    ————————————————
    function slideStart(){
      ・
      ・
      ・

    ————————————————
    これを特定のタイミングで実行させれば大丈夫かと思います。

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

  • beatpo | 2015.03.13 0:20

    はじめまして。
    こちらのスクリプト使わせて頂いてます。
    一つ伺いたいのですが、スライダー要素をシャッフルさせる機能を
    持たすのは容易でしょうか。
    いろいろ試してるのですがうまくいきません。
    ご教授いただけると助かります。
    宜しくお願いします。

  • BlackFlag | 2015.03.15 10:26

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

    ランダム表示については当ブログ別記事の

    ・jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
    https://black-flag.net/jquery/20130327-4522.html

    こちらの記事の2つ目のサンプルにて
    リストをランダムに入れ替えるスクリプトを紹介しておりますので
    参考にしてみていただけますでしょうか。

    よろしくお願いします。

  • mochinikuiniku | 2015.05.16 21:54

    初めまして。
    iphoneのsafariで下にスクロールしたときに
    上部に空きができてしまうのですが、
    どうすれば開かなくなるのかわかりません。
    教えていただきたいです。よろしくお願いします。

  • BlackFlag | 2015.05.20 1:06

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

    iPhoneでのアドレスバーが縮小される際のイベントは制御できないようでしたので
    viewportに「minimal-ui」を追加して常にアドレスバーを
    小さいパターンで表示する方法で解消できるかと思います。
    ※iPhoneではアドレスバーは常に縮小版になります。

    サンプル画面も調整しておりますので
    併せてご参照いただければと思います。

    よろしくお願いします。

  • nashigoren | 2015.05.28 19:21

    はじめまして!

    素敵なスクリプトの公開、ありがとうございます!
    大変、勉強になります。

    実際に自分が作っているサイトに組み込んでみたのですが、
    スライドショーが始まる前に、一瞬スライドショーより下にある
    コンテンツ部分が表示され
    その直後、スライドショーが始まるという動きになります。

    サンプルの猫ちゃんの画像は、そのようなことがないようですが
    何か解決策や原因等わかれば
    大変お手数ですがご教授いただければ助かります。

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

  • BlackFlag | 2015.06.03 1:34

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

    ロード時の表示の件についてですが
    サンプルではスライドショー部分の高さを取得するまで
    ページ全体を非表示にしています。

    CSS側でbodyに「visibility: hidden;」をいれて
    スクリプト(実行後に)の161行目で「visibility: visible;」に変えているので
    CSS側をご確認いただきbodyに「visibility: hidden;」をいれてみてください。

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

  • nashigoren | 2015.06.25 16:53

    >BlackFlag様

    お返事が遅くなり、申し訳ありません。

    ご指示いただいた、bodyに「visibility: hidden;」を入れることで
    解決いたしました。

    ご教授感謝です!
    本当に、ありがとうございます!

  • frogman | 2015.06.30 10:25

    はじめまして。

    すばらしいスクリプトの提供ありがとうごいます。
    ずっと探していたスライドショーを見つけて大変嬉しく思います。

    ひとつご質問があるのですが、#Wrapperの部分のトップにヘッダーを配置してスクロールして
    上部に来たら固定されるようにしたいのですが、何度やっても固定されないかスクロールして
    すぐに固定されるかで上手くいきません。

    多分、スクリプトの書き方が悪いのでしょうが、宜しければご教授いただけると幸いです。

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

  • BlackFlag | 2015.07.03 1:00

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

    スクロールでのメニュー固定については
    スクロール時とリサイズ時にスライドエリアの高さを取得して、
    その高さの値とスクロール値と比較して、
    大きいか小さいかでメニューエリアのCSS「position」プロパティを
    「absolute」と「fixed」に切り替えて位置固定制御をする構成になるかと思います。

    参考までに簡単なサンプルを用意しましたので
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShowMenuFixed.zip
    こちらからファイルをダウンロードして
    CSSとスクリプトをご確認いただければと思います。
    ※スクリプトの一番下に「MenuFixed」のコメントで10行程度追記してあります。

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

  • frogman | 2015.07.04 2:17

    BlackFlag様

    サンプルまで作っていただいて、ありがとうございます!

    サンプルを参考にしたら、問題なく動作しました!

    ご丁寧な対応に心より感謝いたします!

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

  • 通りすがりの名無し | 2015.09.08 16:08

    使わせていただいてありがとうございます。

    レスポンシブの件ですが、スマホ表示の時に画像の幅を横いっぱいに揃える方法はあるのでしょうか?

    このスクリプトを使うと、50%オーバーで1枚のちゃんとした画像が見られない状態になっています。

    どうか教授ください。

    よろしくお願いします

  • BlackFlag | 2015.09.14 1:26

    >通りすがりの名無し さん
    コメントありがとうございます。

    iPhoneなどスマートフォンとタブレットを判別して
    画面サイズを変えるパターンは以前このようなものは作成していました。
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShow-iPhoneDivide/

    ファイルは下記よりダウンロードできます。
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShow-iPhoneDivide.zip

    仰っている仕様と合っているかは分からないのですが
    構成等をご参照いただければと思います。

    よろしくお願いします。

  • 通りすがりの名無し | 2015.09.15 15:20

    ありがとうございます。

    助かりました。

    使わせていただきます。

  • SNP | 2015.12.09 19:42

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

    このスライダーですが、例えば768px以下とかになったら全画面ではなく
    普通にレスポンシブ対応したスライダーになる(ブラウザの高さの取得をやめる)とかできないでしょうか?

    告知用のスライドがあるときにスマホサイズでトリミングされて
    告知内容が切れてしまうのを回避できたらいいなと思っています。

  • aiiiug87 | 2015.12.11 18:56

    BlackFlag様

    すばらしいスライドショーをありがとうございます。
    使わせて頂いております。

    一つ、難問がございまして、
    Macのsafariで、スライドショーが実装されているページに、
    別ページから、アンカーリンクへ飛ぼうとすると,
    トップ画面が表示されてしまいます。

    解決さくはありますでしょうか?

    ご教授頂ければ幸いです。

  • BlackFlag | 2015.12.12 9:57

    >SNPさん
    コメントありがとうございます。
    当記事のスライドショースクリプトをご検討いただいている様で
    とても嬉しく思っております。

    ウィンドウサイズを判別しての処理ではないですが
    iPhoneなどスマートフォンとタブレットを判別して
    スライダー幅を画面幅に変えるパターンは
    以下のようなサンプルを用意させていただいております。
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShow-iPhoneDivide/

    ファイルは下記よりダウンロードできます。
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShow-iPhoneDivide.zip

    この仕組みを使ってユーザーエージェントではなく
    ウィンドウ幅を判別して処理を変えることも可能かと思っております。

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

  • SNP | 2015.12.12 22:50

    返信ありがとうございます。
    サンプルまでご用意いただき感激です。

    理想通りの動きを実現できそうです。

    このプラグイン以外にも使用させていただいているものがいくつかあり、
    いつも本当に助かっています。

    ありがとうございます!

  • BlackFlag | 2015.12.14 1:33

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

    スクリプトの構成上、ページロード完了後に
    スライドショーエリアに高さを入れ込んでいる影響かと思われますので
    スライドショー用のスクリプトとは別に
    実装しているページにアクセスした際に
    URLにアンカーリンク用の「#」がついていた場合には
    ページロード完了後に該当IDの位置にスクロールする、
    といった処理が必要になるかと思います。

    サンプル等を用意する時間がちょっととれないのですが
    お試いただけると幸いです。

    よろしくお願いします。

  • tni | 2015.12.18 4:07

    大変素晴らしいスクリプトをご教授いただき有難うございます。
    HTML5にてJSを外部ファイル読み込みにしたいのですが、
    何故か上手く行きません。(画面がホワイトアウトします)
    alertでは、表示されるので、ファイル自体は読み込まれているようなのですが….
    お手隙の際に、ご教授頂けると大変嬉しく思います。宜しくお願い致します。

  • BlackFlag | 2015.12.21 1:16

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

    スクリプトの外部ファイル化はもちろん可能です。

    記事内のスクリプトで言う
    4~164行目を外部JSファイルにしていただければ
    正常に動くと思います。

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

  • tni | 2015.12.24 12:52

    Black Flag様
    ご返信いただき有り難う御座います。
    外部ファイル化が無事に成功しました。私のタイピングミスが原因でした。
    お手数をお掛けして誠に申し訳ございません。そして本当に有難う御座いました。

    実は、別の問題が発生しておりご教授を頂きたく思っております。
    記事内のスクリプトを使用しコーディングしたページのテーブルタグ内のth,tdタグ内の要素に自動でaタグが付与される現象に悩んでおります。(liタグにも自動でaタグが付与されます)

    お手隙の際に、ご返信頂けると大変嬉しく思います。
    どうぞ宜しくお願い致します。

  • tni | 2015.12.24 13:18

    >Blak Flag様
    度々のメッセージ誠に恐縮です。
    先程の自動でaタグが付与される件に関してなのですが、
    大変申し訳ございません。私のコーディングミスが原因でした。

    寝ずに作業していたことも有り、
    本当に申し訳ございませんでした。以後、このようなことが無いように致します。
    これからも素敵な記事を是非よろしくお願い致します。
    失礼致します。

  • oggi | 2016.01.11 20:25

    素晴らしいスライドショースクリプトを公開していただき、誠にありがとうございます!

    スクロール時にメニューが固定される形式↓
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShowMenuFixed.zip

    を活用したい考えています。

    こちらのファイルですが、ファーストビューでメニューが表示されるようにすることは可能でしょうか?
    お手すきの際にご教授いただけると幸いです。

  • oggi | 2016.01.11 22:11

    ファーストビューでのメニュー表示ですが、ネガティブマージンを設定することで解決できました。
    失礼いたしました。

  • sato | 2016.07.10 20:52

    はじめまして。
    素晴らしいスクリプト。
    新規制作中のページに使わせていただこうと、奮闘中です。
    私、だいたい素人なのですが、質問させてください。

    フルスクリーンスライドショーにマウスを乗せると表示される
    画像の格納場所(左下部分に表示)を消したいのですが、
    どのようにすればよろしいのでしょうか?
    何とかしようとやってみたのですが、どうにもわかりません。
    ご教授いただけますよう、お願いいたします。

  • BlackFlag | 2016.07.13 1:37

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

    ご質問いただきました件についてですが
    おそらくブラウザの仕様で表示されるもののことだと思われますが、
    「ステータスバー リンク 非表示」と検索すると解消方法が
    いくつか出てくるかと思われますのでお試しいただければと思います。
    (スクリプト内ではそのような表示をする動作は入れておりません)

    よろしくお願いします。

  • tachi | 2016.10.06 22:37

    素晴らしいスライドショースクリプトを公開していただき、誠にありがとうございます!
    作りたかったページにぴったりすぎて、久々にびっくりしました。
    そして、すごく分かり易くて助かりました。
    ココに辿り着くまでに・・・
    本当に助かりました。ありがとうございます。

    私自身、初心者なので質問させて頂くことがあるかもしれません。
    今後も宜しくお願いいたします。
    お礼が申し上げたくコメントいたしました。
    ありがとうございました。

  • BlackFlag | 2016.10.07 1:20

    >tachiさん
    コメントありがとうございます。
    当記事のスライドショースクリプトがお役にたったようで
    うれしく思っております。

    できるかぎり分かりやすく、できるかぎり実装しやすいスクリプトを心掛けておりますので
    その様なお言葉をいただけるととても励みになります。
    ありがとうございます。

    他にもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • へっぽこ | 2016.10.07 15:34

    はじめまして、こんにちは。
    1カラムでヒーローイメージ(というんですね)部分をスライドさせる。
    その仕様で作成するのに参考にさせていただいております。
    ありがとうございます。

    スライドの動作自体は問題なくいけたのですが、画像がフェイドアウトするまでに少しずつ拡大しながら画像が切り替わるように出来ないかと思ったのですが、いろいろ調べてみた限りでは簡単そうで簡単ではないなと。

    しかしもしご教授いただけるならと思い書き込みさせていただきました。
    ご多忙の折大変恐縮ではございますがご検討いただければ幸いです。

  • BlackFlag | 2016.10.12 2:10

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

    ご質問いただきました件についてですが
    表示状態になっている画像(リスト)に対して
    「mainActive」の名前でクラスが付くように構成しておりますので
    そのクラスに対してCSSでの拡大アニメーション「scale」を操作するようにすることで
    実現できるのではないかと思っております。

    いつかそのような演出を実装したスライダーも
    ここで紹介させていただこうかと思っております。

    よろしくお願いします。

  • mari | 2016.11.13 17:01

    初めまして。理想のスライドショーに出会えました!ありがとうございます。
    初心者なので教えていだだけたら嬉しいのですが、各スライドにそれぞれテキストを重ねて表示したいのですが、内に要素を置いてposition:absoluteにしても表示されません。どうすればいいのでしょう?

  • BlackFlag | 2016.11.15 1:11

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

    ご質問いただいた点についてですが
    実際に実装されている画面を見てみないと何とも言えないのですが
    各スライドにテキストを重ねて表示するには、
    <li>内に要素を置いて「position:absolute」にすれば表示されると考えております。

    表示されない場合は、重ねるテキスト要素に「z-index」を指定して
    重ねる順序をきちんと指定してみてください。

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

  • om | 2017.04.22 17:28

    初めまして。
    作り方がわからなかったものの解決策を導いてくださるサイトに出会えてとても嬉しく思います。

    質問なのですが、
    画像のスライドを一周したら最後の画像で停止させたいのですが、どのようにすればできますでしょうか?
    自分でも調べてみたのですが、限界があり、行き詰まってしまいました。お力添えしていただきたく思います。

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

  • BlackFlag | 2017.04.23 9:31

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

    スライドショーを一周させたら停止させるには
    スクリプトの99~103行目の「fadeTimer()」関数に
    判別処理を加えた調整をする必要があります。

    参考までに簡単なサンプルを用意しましたので
    https://black-flag.net/devel/jQueryHeaderFixedFullScreenSlideShow/jQueryHeaderFixedFullScreenSlideShowNoRepeat.zip

    サンプルHTMLファイル3つともに
    「fadeTimer()」の部分を書き換えてありますので
    ご確認いただければと思います。
    ※併せて影響するページネーションクリック時のスクリプトも少し調整してあります。

    よろしくお願いします。

  • maru | 2017.07.28 17:08

    はじめまして

    いろいろなシーンで参考にさせていただいております。
    この場を借りて感謝申し上げます。ありがとうございます。

    ■アクセス時に表示される1枚目のスライドについて質問がございます。

    対象ページにアクセス時、1枚目のスライドはすぐに表示させ(通常の画像様に)
    「switchDelay」の時間経過後から、2枚目のスライドが切り替わる方法を
    模索しております。

    ご多忙の折 恐縮ですがコメントなどをいただけますと幸いです。

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

  • BlackFlag | 2017.07.29 10:06

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

    ご質問いただきました、
    ページアクセス時に1枚目の画像だけフェードせずに表示する件についてですが
    サンプルスクリプトの29行目の「findLiFirst」に指定している
    最後の「fadeSpeed」を「0」に書き換えることで実現できるかと思います。

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

  • maru | 2017.07.31 11:30

    >BlackFlag 様
    早速のご返信誠にありがとうございます。

    アドバイスいただいた内容を試したところ
    イメージ通りの動きとなりました。

    ご指摘いただいた部分が最小で済んだ点など
    「さすが!」と思いました。

    これからもいろんな記事で、参考させていただく
    機会も予想されます。
    その時は感謝の気持ちも含めながら拝読させていただきます。

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

  • asuka | 2017.09.28 19:50

    はじめまして。
    いつも勉強になる記事をありがとうございます。よく参考にさせていただいております。

    このスクリプトですが、
    ・タブレットやスマートフォンなどではフルウィンドウサイズで表示
    ・PCでは「サイドカラム以外の横幅×ウィンドウの高さいっぱい」に表示
    という使い方はできるでしょうか。

    250pxなど固定幅のサイドカラムがあり、メインエリアは可変、という構成で、
    ウィンドウ幅ではなく、指定エリアの横幅を取得したい、という感じです。

    お忙しいところ恐縮ですが、ご教授いただけましたら幸いです。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2017.10.07 11:04

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

    ご質問いただいた点についてですが
    レスポンシブ動作としてウィンドウサイズによって
    レイアウトを変えるということでしょうか。
    それともPC・タブレット・スマートフォンのデバイスを判別して
    レイアウトを変えるということでしょうか。

    レスポンシブの場合はスクリプト側でもウィンドウサイズを判別、
    デバイスごとの場合はUserAgentを判別して
    スライドショー部分のサイズを調整する必要があります。

    どちらの場合でも不可能ではないですが
    判別方法と併せてスクリプト内のスライドサイズ制御の部分を
    カスタマイズする必要があるかと思います。

    よろしくお願いします。

  • y | 2020.04.16 12:36

    スライダー使わせていただきました。
    どのサイトよりも理解しやすく使いやすいです。
    非常に助かりました。
    ありがとうございました。

  • BlackFlag | 2020.04.19 20:50

    >yさん
    コメントありがとうございます。
    当記事のフルスクリーンスライドショーがお役に立ったようでうれしく思っております。

    その他にもいろいろと紹介させていただいておりますので
    あれこれご活用いただけると幸いです。

    よろしくお願いします。

  • tomo | 2021.07.16 12:00

    大変素晴らしいscriptを公開していただきまして、ありがとうございます。

    1点ご教授いただければと思います。
    表示画像が画面よりも大きくなってしまいます。

    画像の推奨サイズなどございますでしょうか?

  • BlackFlag | 2021.07.20 20:11

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

    画面めいっぱいに表示するには、表示している画面サイズの画格によって、画像の上下を画面にフィットさせて左右をカットする、もしくは左右をフィットさせてはみ出た上下をカットする必要があります。
    そのために画像が画面よりも大きくなってしまうのは仕様になります。

    CSSの「background-size:cover」と同じイメージです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して