先日、とある案件で必要になり、jQueryを使って作成した、
コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが
今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。

まずは動作のサンプルから。

jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法

指定した間隔(時間)で一つずつ画像(コンテンツ要素)がスライドします。
スライド箇所の下にサムネイルを配置し、マウスオーバーすることで
該当箇所へ任意にスライドさせることができます。
サムネイル部分にマウスオーバーしている間は、
メイン部分の自動スライドの動作は停止します。

この動作の全体構成について、
HTMLから。

◆HTML
<div id="slider_main">
<ul>
<li><img src="img/photo01.jpg" width="400" height="300" alt="" /></li>
<li><img src="img/photo02.jpg" width="400" height="300" alt="" /></li>
<li><img src="img/photo03.jpg" width="400" height="300" alt="" /></li>
<li><img src="img/photo04.jpg" width="400" height="300" alt="" /></li>
</ul>
</div><!--/#slide_main-->

<div id="slider_thumb">
<ul>
<li><img src="img/photo01.jpg" width="50" height="50" alt="" /></li>
<li><img src="img/photo02.jpg" width="50" height="50" alt="" /></li>
<li><img src="img/photo03.jpg" width="50" height="50" alt="" /></li>
<li><img src="img/photo04.jpg" width="50" height="50" alt="" /></li>
</ul>
</div><!--/#slide_thumb-->

上部の<div id=”slider_main”>がメイン部分にあたるソースになり、
下部の<div id=”slider_thumb”>がサムネイル部分になります。
2つの<div>の中にはそれぞれにリストを入れ込みます。(ID名は変更可能)

HTMLはメイン用とサムネイル用の<div>と<ul>リストを用意するのみです。
リストの数はいくつでも増減可能です。

そしてこのHTMLソースに対してのCSSは以下の様に。

◆CSS
/* #slider_main
--------------------------- */
#slider_main {
	margin: 0 auto;
	width: 400px;
	height: 300px;
	text-align: left;
	position: relative;
	overflow: hidden;
}
#slider_main ul {
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
}
#slider_main ul li {
	width: 400px;
	height: 300px;
	float: left;
	display: inline;
	overflow: hidden;
}



/* #slider_thumb
--------------------------- */
#slider_thumb {
	margin: 10px auto;
	width: 400px;
	height: 50px;
	text-align: center;
}
#slider_thumb ul {
	display: inline;
}
#slider_thumb ul li {
	cursor: pointer;
	display: inline;
}
#slider_thumb ul li.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


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

#slider_main ul {
	display: inline-block;
	overflow: hidden;
}

CSSはあまり複雑に凝ったことはせず
メイン部分では幅や高さを指定して「overflow:hidden」をつけて
中に入るリストをfloatさせます。

サムネイル部分のレイアウトはどのようにも変更可能ですが
<li>要素に「cursor: pointer;」を付けることと
アクティブ状態を形成する「li.active」の部分は最低限必要な箇所になります。

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

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var setMainId = '#slider_main';
	var setThumbId = '#slider_thumb';
	var slideTime = 1000;
	var delayTime = 5000;

	$(setMainId).each(function(){
		var sliderWidth = $(this).width();
		var sliderHeight = $(this).height();

		var listWidth = parseInt($(this).children('ul').children('li').css('width'));
		var listCount = $(this).children('ul').children('li').length;

		var ulWidth = (listWidth)*(listCount);

		$(setMainId + ' ul').css({
			width: (ulWidth),
			height: (sliderHeight)
		});

		$(setThumbId + ' ul li:first').addClass('active');
		$(setThumbId + ' ul li').css({opacity:'0.7'});

		$(setThumbId + ' ul li').hover(function(){
			clearInterval(setTimer);
			$(this).stop().animate({opacity:'1'},300);
			var connectCont = $(setThumbId + ' ul li').index(this);
			$(setMainId + ' ul').stop().animate({left:(-(sliderWidth)*(connectCont))},slideTime);
			$(setThumbId + ' ul li').removeClass('active');
			$(this).addClass('active');
		},function(){
			$(this).stop().animate({opacity:'0.7'},300);
			timer();
		});

		timer();

		function timer() {
			setTimer = setInterval(function(){
				$(setMainId + ' ul').each(function(){
					var moveLeft = parseInt($(this).css('left'));
					var listLengh = $(setThumbId + ' ul li').length;

					var listWidth = parseInt($(setMainId + ' ul li').css('width'));
					var moveLengh = -((listWidth)*((listLengh)-1));

					if(moveLeft == moveLengh){
						$(setMainId + ' ul').stop().animate({left:'0'},slideTime);
						$(setThumbId + ' ul li.active').each(function(){
							$(this).removeClass('active');
							$(setThumbId + ' ul li:first').addClass('active');
						});
					}else{
						$(setMainId + ' ul').stop().animate({left:'-=' + (sliderWidth)},slideTime);
						$(setThumbId + ' ul li.active').each(function(){
							$(this).removeClass('active');
							$(this).next().addClass('active');
						});
					}
				});
			},delayTime);
		};
	});
});
</script>

メイン部分の<div>要素の幅と高さの値を元に
スライドさせる<ul>の幅やスライドさせる距離など計算しています。

スクリプト開始部分にある
————————————————
var setMainId = ‘#slider_main’;
var setThumbId = ‘#slider_thumb’;
var slideTime = 1000;
var delayTime = 5000;
————————————————
は上から
————————————————
・該当するメインエリアのID名
・該当するサムネイルエリアのID名
・スライド動作で切り替わる際の時間
・次のスライド動作が実行されるまでの待機時間
————————————————
となっているので、
値を変更することでカスタマイズが可能です。

スライドさせる要素は<li>リスト要素になっているので
画像のみではなく、テキストやリンクなども配置することができます。

サムネイル箇所を黒丸「●」のような画像にすることで
ページネーション的な見せ方にすることも。

スライドさせる動作以外、汎用性はあまりない作りになっていますが
サイトのトップページなどで複数枚の画像をスライドさせる時など
シンプルに使えるかと思っています。

自動でスライドするコンテンツスライダーが必要になった際に是非。。

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

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

Related Posts

Comments (106)

  • yami | 2012.02.15 11:56

    こんにちは。

    スライドショーを探していて、こちらのページにたどり着いた者です。
    素敵なプラグインに出会えて嬉しい限りです。

    1つ質問なのですが、こちらに掲載されているjQueryのソースコードを、商用で利用することは可能でしょうか?
    当方、ただいま自社のサイトを制作しており、そのサイトで使用したいと考えている次第です。

  • BlackFlag | 2012.02.15 12:31

    >yamiさん

    コメントありがとうございます!

    こちらのスクリプトの使用に関しては
    個人・商用問わず、ご自由に使用していただいてかまいません。

    この記事に関わらず、当ブログで紹介しているスクリプトは
    特にライセンスなども設けていないので、
    ご自由に使用および改変して
    サイトに組み込んでいただいて問題ありませんので
    ご活用いただけると幸いです!

    よろしくお願いします!

  • yami | 2012.02.15 13:29

    迅速な返信ありがとうごます!
    感謝して使わせていただきます!

    サイトを拝見したところ、素敵なスクリプトがたくさんあるので、スライドショー以外も使わせていただくかもしれません!

    丁寧かつ迅速な対応、本当にありがとうございました!

  • BlackFlag | 2012.02.15 21:22

    >yami さん

    ありがとうございます!

    また何かご質問など御座いましたら
    お気軽にご連絡くださいませ。

  • ken | 2012.02.25 20:59

    はじめまして。
    素人なのですが最近いろいろ勉強しており、このblogを拝見させて頂きました。

    ほんとに素晴らしい機能で是非、習得したく参考にさせて頂いているのですが、
    どうしても自身でやってみると、左側に余白ができその余白分ずっとずれてスライド
    してしまいます。

    どこかの記述がおかしいのだろうと思うのですが、正直自分では判らず悩んでおります。
    もし、このあたりの記述が怪しいんではないか。などと思われる箇所がお判りでしたら、
    アドバイス頂ければ幸いです。

    これからも勝手にいろいろ勉強させて頂きます。
    ありがとうございます。

  • BlackFlag | 2012.02.25 22:59

    >kenさん

    コメントありがとうございます!

    このスクリプトをご活用いただいているようで
    ありがとうございます!

    ご連絡頂いた内容についてですが
    全体のHTML、CSSがどのように構成されているか
    ファイルを見てみないと何とも言えないのですが、
    現状で考えられる点としては、
    CSSでブラウザリセットがされていないのかと感じます。

    CSSファイルに
    ———————————
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    li {
    list-style: none;
    }
    ———————————
    などのブラウザの初期値をリセットする指定が入っているか確認してみてください。

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

  • ken | 2012.02.26 14:08

    お返事ありがとうございました。
    ご指摘頂きました箇所を確認、修正したところ、

    出来ました!
    感激です!
    ほんとにありがとうございます!

    これからもたくさん参考にさせて頂き、勉強させて頂きます。
    ほんとにありがとうございました。

  • ken | 2012.02.26 16:16

    何度もコメントしてしまい大変恐縮なのです。

    昨日のコメントの件については前述どおり解決できたのですが・・・、

    サムネイル画像の下に続けて、別の記述を加えようとしたところ、

    サムネイル画像と次の記述との間に大きな余白が出来てしまい、

    その余白を無くすことが出来ません。

    コメント欄にてこのように続けて質問することは大変ご迷惑を

    お掛けすることになりますので、本当に申し訳無いのですが、

    お時間ございましたら、良きアドバイスを頂ければ幸いです。

    それでは失礼いたします。

    続けてコメントしてしまったことをお許し下さい。

  • BlackFlag | 2012.02.26 19:05

    >kenさん

    実装のご報告ありがとうございました。
    無事にスライドの左側に出る余白は解消できたようで安心致しました。

    続いてご質問いただいたサムネイル箇所の下に余白が出る部分については
    おそらく、CSSで「#slider_thumb」に設定している「height」の値の調整だと思われます。

    ここの値を、Kenさんの方で実装しているHTMLの
    サムネイル画像の高さと同じ値にしてみてください。

    本記事でダウンロードできるサンプルデータCSS内の指定と
    記事内で記載してあった上記CSSの値がちょっと違っていたので
    記事の方、修正してあります。(スミマセン。。)

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

  • ken | 2012.02.27 14:32

    こんにちは。

    度重なる質問にご丁寧な返信ほんとにありがとうございます。

    出来ました!
    ほんとに勉強になりました。

    これからも参考にさせていただきますので、
    たくさんの技をご開示下さい。

    期待しています。
    ありがとうございました。

  • BlackFlag | 2012.02.28 10:04

    >kenさん

    無事に理想通りの動作が実装できたようで安心しました。

    CSSは初めはややこしかもしれませんが
    慣れてしまえば他にも色々と発想が増えると思うので
    これからもがんばってください。

    また何かお役に立てる情報があったら
    紹介させて頂きますね。

    よろしくお願いします。

  • mil | 2012.03.08 17:15

    はじめまして。milと申します。
    可愛い猫ちゃんですね♪

    JQueryの勉強をしていてこちらのページにたどり着きました。
    初歩的な質問で恐縮なのですが、マウスオーバーではなくクリックでの実装はできないのでしょうか?
    突然の質問で申し訳ないです。

  • BlackFlag | 2012.03.08 21:49

    >milさん

    コメントありがとうございます!

    当記事のスクリプトをご活用いただき嬉しく思っております。
    (猫の写真についても気に入っていただけたようで嬉しく思っています^^)

    ご質問頂きましたクリック動作についてですが、
    スクリプト内の
    —————————————————-
    $(setThumbId + ‘ ul li’).hover(function(){
    —————————————————-
    の部分に「.click」処理を追記して
    クリック動作でスライドが動作するように指定する形になります。

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

    スクリプト部分で不明な点などあればまたご連絡ください。

    よろしくお願いします。

  • westa | 2012.04.12 11:55

    初めまして。

    この素晴らしいスライドショーを是非自分のページで利用してみたいと思い、ページに最適化をしています。
    そこで少しうまくいかない場所がありますので、質問させてください。W950H270の中にスライドのエリアとサムネイルのエリアを入れたいのです。
    また、サムネイルを横並びでは無くスライドの右側に縦並びにしたいのです。(サムネイル画像一つのサイズはW150H50ほどのバナーサイズで)
    自分なりに編集しているのですが、なかなかうまくいかず質問させていただきました。
    お忙しい中申し訳ございませんが、ご教授頂けたらと思います。

  • BlackFlag | 2012.04.15 0:02

    >westaさん

    コメントありがとうございます!
    返信が送れてしまい申し訳ありませんでした。。

    このスライドショースクリプトをご使用いただきありがとうございます。

    ご質問いただいた内容についてですが
    スクリプトは特に変更することなく
    HTMLとCSSによってのレイアウト変更で実現することができると思っております。

    参考までにこの記事で紹介しているサンプルデータを
    W950×H270のサイズでサムネイルを右端に縦にW150×H50で並べたサンプルを用意してみましたので
    必要であれば下記よりダウンロードしてHTMLとCSSファイルの中身を見てみてください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderLayout950.zip

    不明な点があればご連絡ください。

    よろしくお願いします。

  • smpy | 2012.04.23 16:07

    始めまして、いつも参考にさせて頂いていおります。

    充実した情報のご提供、ありがとうございます。

    こちらのスライドショーが実現したい動作に近く、是非使用させて頂きたいと考えています。
    実現したい動作として、クリックでの変更はmiさんの質問内容にて解決しているのですが、
    さらに、今表示している画像に対し、”前へ”、”次へ”のボタンを追加することは可能でしょうか?

    初歩的な質問かもしれませんが、勉強中の身の為、ご教授頂けると幸いです。

  • BlackFlag | 2012.04.24 1:13

    >smpyさん

    コメントありがとうございます!

    このスライダースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた、
    「前へ」「次へ」のボタンを追加するにはいろいろな方法がありますが、
    HTMLにまずそれぞれIDをつけたボタン用のソースを追加し、

    【例】————————————————-
    <span id=”moveprev”>≪</span><span id=”movenext”>≫</span>
    ——————————————————-

    サムネイルで現在アクティブ状態になっているリストを基準にして
    追加したボタンへのアクションを以下のように追加します。

    【例】————————————————-
    $(‘#movenext’).click(function(){
    clearInterval(setTimer);
    var $setThumbLiActive = $(‘#slider_thumb ul’).children(‘li.active’);
    $setThumbLiActive.each(function(){
    var listLengh = $(‘#slider_thumb ul li’).length;
    var listIndex = $(‘#slider_thumb ul li’).index(this);
    var listCount = listIndex+1;

    if(listLengh == listCount){
    $(‘#slider_thumb ul li:first’).click();
    timer();
    } else {
    $(this).next(‘li’).click();
    timer();
    }
    });
    });
    $(‘#moveprev’).click(function(){
    clearInterval(setTimer);
    var $setThumbLiActive = $(‘#slider_thumb ul’).children(‘li.active’);
    $setThumbLiActive.each(function(){
    var listLengh = $(‘#slider_thumb ul li’).length;
    var listIndex = $(‘#slider_thumb ul li’).index(this);
    var listCount = listIndex+1;

    if(1 == listCount){
    $(‘#slider_thumb ul li:last’).click();
    timer();
    } else {
    $(this).prev(‘li’).click();
    timer();
    }
    });
    });
    ——————————————————-

    これらを追加することで「前へ」「次へ」のボタンを追加することが可能になります。

    サンプルファイルも用意しましたので
    必要あれば下記URLよりダウンロードしてご確認ください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderClickNextBack.zip

    よろしくお願いします!

  • smpy | 2012.04.24 11:38

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

    DEMOまで作っていただき、非常に分かり易く、感激しております!

    思ったとおりの動作ができるようになりました。本当に助かりました。

    今後も参考にさせていただきます。

  • BlackFlag | 2012.04.25 0:27

    >smpyさん

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

    無事に思い通りの動作が実装できたようで安心致しました。

    ここで紹介しているスクリプトは出来る限り
    シンプルで分かりやすい構成を心がけていますので
    スクリプトの内容を辿っていただくと
    何をどのように処理しているか分かっていただけるかと思っています。

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

  • maru | 2012.04.26 19:02

    いつも参考にさせています。

    今回、メインビジュアルに↓を
    http://black-flag.net/jquery/20120215-3671.html

    で、同じページにカルーセル
    http://black-flag.net/jquery/20120111-3643.html

    を設置してみました。
    カルーセルは正常に動くのですが、メインビジュアルにカーソルを持って行って操作したあとに
    ・イメージが左側に行きっぱなしになる
    ・停止する位置がずれていく
    等の症状が出てしまいます。

    カルーセルをコメントアウトしたら、正常だったのですが。
    メインビジュアル側は画像のサイズに合わせてcssでの値を変えた程度です。

    お知恵を貸してください。

  • maru | 2012.04.26 19:26

    ↑すいません、自己解決しました。関数timerがかぶってたみたいでした。
    今後とも参考にさせていただ買いますので、よろしくお願いしますm(__)m

  • BlackFlag | 2012.04.27 0:29

    >maruさん

    コメントありがとうございました!

    当ブログのスクリプトをご活用いただいているようで
    とても嬉しく思っております!

    サンプル内の変数名や関数名は結構同じ名前のものを使っているので
    1ページ内に多数組み込もうとすると、そういった事が起こってしまいますね。。
    無事に解決してよかったです。

    今後注意しておきます。

    よろしくお願いします。

  • chobi | 2012.06.02 0:05

    こんばんわ
    いつも参考にさせて頂いております。
    こちらのサムネイルのロールオーバーで切り替わるタイプをすごく探していました。

    そこでご相談なのですが、こちらのタイプでクロスフェードで切り替わる用にできないでしょうか?

    初心者なので、どこをどう直せばいいのかよくわかりません。。。。

    よろしくおねがいいたします。

  • BlackFlag | 2012.06.03 22:44

    >chobiさん

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

    ご質問いただいた内容についてですが
    ここで紹介しているスクリプトの構成上、
    クロスフェードさせることは難しいのですが
    少しカスタマイズすることでフェード切り替えにすることは可能です。

    ◆スクリプト31行目 ———————————-
    $(setMainId + ‘ ul’).stop().animate({left:(-(sliderWidth)*(connectCont))},slideTime);

     ↓↓↓↓↓↓

    $(setMainId + ‘ ul’).stop().animate({opacity:’0′},fadeTime,function(){
    $(setMainId + ‘ ul’).css({left:(-(sliderWidth)*(connectCont))}).stop().animate({opacity:’1′},fadeTime);
    });
    —————————————————————–

    ◆スクリプト51行目 ———————————-
    $(setMainId + ‘ ul’).stop().animate({left:’0′},slideTime);

     ↓↓↓↓↓↓

    $(setMainId + ‘ ul’).stop().animate({opacity:’0′},fadeTime,function(){
    $(setMainId + ‘ ul’).css({left:’0′}).stop().animate({opacity:’1′},fadeTime);
    });
    —————————————————————–

    ◆スクリプト57行目 ———————————-
    $(setMainId + ‘ ul’).stop().animate({left:’0′},slideTime);

     ↓↓↓↓↓↓

    $(setMainId + ‘ ul’).stop().animate({opacity:’0′},fadeTime,function(){
    $(setMainId + ‘ ul’).css({left:’-=’ + (sliderWidth)}).stop().animate({opacity:’1′},fadeTime);
    });
    —————————————————————–

    念の為、7行目で指定している変数名もフェード用の名前に変えます。

    ◆スクリプト7行目 ———————————-
    var slideTime = 1000;

     ↓↓↓↓↓↓

    var fadeTime = 300;
    —————————————————————–

    マウスオーバーですぐスライドさせるのではなく
    一度コンテンツ要素をフェードアウトさせて、
    スライド位置をアニメーション無しで変更し
    再度フェードインさせている構成になっています。

    参考までにサンプルスクリプトも用意しましたので
    必要あれば下記URLよりダウンロードしてご確認ください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderFade.zip

    よろしくお願いします。

  • chobi | 2012.06.05 21:59

    ありがとうございます!
    ホントにホントにありがとうございます!

  • BlackFlag | 2012.06.06 0:58

    >chobiさん

    ご返信ありがとうございました。
    改修版がお役に立った様で安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • taka | 2012.07.20 15:27

    すみません。
    直接HTMLタグを貼り付けてしまったので、もう一度・・・。

    初めまして。
    当ショップのTOPに使用させて頂いております。
    想像していた通りの動きで、大満足なのですが、
    サムネイルの部分にリンクを貼りたいと思っております。
    初心者なので、全くわからず・・・。
    htmlに<a href=”">を付けてみたら、JQUERIが作動しなくなりました。
    リンクを上手に貼る方法はございますか??

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

    <div id=”slider_thumb”>
    <ul>
    <li><img src=”img/photo01.jpg” width=”50″ height=”50″ alt=”" /></li>
    <li><img src=”img/photo02.jpg” width=”50″ height=”50″ alt=”" /></li>
    <li><img src=”img/photo03.jpg” width=”50″ height=”50″ alt=”" /></li>
    <li><img src=”img/photo04.jpg” width=”50″ height=”50″ alt=”" /></li>
    </ul>
    <div><!–/#slide_thumb–>

    P・S
    上記のタグ全てにリンクを貼りたいと思っており、リンク先は全て違うページとなります。

  • BlackFlag | 2012.07.21 2:03

    >takaさん

    コメントありがとうございます。

    このスライダーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたサムネイルにリンクを張る件についてですが
    こちらでサンプルデータから確認してみましたが
    下記のように<a>タグを記述する事で問題なく動作するかと思います。

    <div id=”slider_thumb”>
    <ul>
    <li><a href=”#1″><img src=”img/photo01.jpg” width=”50″ height=”50″ alt=”" /></a></li>
    <li><a href=”#2″><img src=”img/photo02.jpg” width=”50″ height=”50″ alt=”" /></a></li>
    <li><a href=”#3″><img src=”img/photo03.jpg” width=”50″ height=”50″ alt=”" /></a></li>
    <li><a href=”#4″><img src=”img/photo04.jpg” width=”50″ height=”50″ alt=”" /></a></li>
    </ul>
    </div><!–/#slide_thumb–>

    参考までにサンプルファイルも用意させていただきましたので
    必要であればダウンロードしてみてください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderThumbLink.zip

    よろしくお願いします。

  • taka | 2012.07.21 13:57

    お返事ありがとうございました!
    無地にリンクを貼れました!!!!!

    <a>タグで問題なかったようです。
    最初に<a>タグを貼った時に稼動しなくなった理由はわかりませんが、おそらく私のミスなのだと思います^^;

    本当にありがとうございました♪
    お蔭様で最高のスライドショーが完成しました!!

    これからもご活躍を期待しておりますので、頑張ってくださいませ☆

  • BlackFlag | 2012.07.22 18:08

    >takaさん

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

    無事にリンクが張れてよかったです。
    サイトに思い通りのスライドショー動作が実装できた様で安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • azu | 2012.08.22 14:46

    始めまして、現在HP作りをしておりまして
    勝手ながら参考にさせて頂いております。
    情報公開ありがとうございます。

    どうしても自分の力では
    不明なところがありましたので支障が無ければ
    ご回答お願い致します。

    < smartRollover.js >を使用して
    ロールオーバー追加させて頂いたのですが
    スライドをしてしまい、一時停止がでない状態です。

    画像にマウスを重ねた場合、ロールオーバーをし一時停止をして
    マウスが画像から離れた場合、スライドを再開する方法を教えて頂けたら大変助かります。

  • ito | 2012.09.04 18:31

    はじめまして。WEB初心者です。

    自社でHPを作らなくてはならなくて
    いろいろイメージスライダーをさがしていたら
    このサイトにたどり着きました!!

    とってもシンプルで、かつ丁寧な説明で
    まだ知識の乏しい私でも、理解できて
    (Javaはまださっぱりですが)助かります。
    IE6で可動なのもうれしいです。
    利用させてもらいますね。

    ありがとうございます~。

  • BlackFlag | 2012.09.05 0:57

    >itoさん

    コメントありがとうございます!
    その様なお言葉をいただけるととても嬉しく思います。

    このスライダースクリプトがお役に立った様でよかったです。
    他にも様々な動作のサンプルスクリプトを紹介していますので
    参考にしてあれこれ遊んでみてください!

    よろしくお願いします。

  • しし丸 | 2012.10.03 22:18

    smpyさんへのサンプルファイルを利用させていただきましたが問題ないでしょうか?
    とても使いやすくかっこいいスライダーで
    本当に助かりました。
    プログラムの苦手な私にとって本当に役に立つ素晴らしいものでした。
    ほかのプログラムも役に立つものばかりで、自分の作りたいものが作れる喜びを感じることができ
    感謝の気持ちでいっぱいです。
    ありがとうございました。
    これからも頑張ってください。

  • BlackFlag | 2012.10.04 1:05

    >しし丸さん

    コメントありがとうございます!

    このスライダースクリプトをご活用いただいているようで
    こちらとしても嬉しく思っております。

    記事で紹介しているスクリプトだけでなく
    コメント内で紹介しているものも
    好き勝手ダウンロードいただいて構いませんので
    あれこれ使ってみてください。

    他にもいろいろスクリプトを紹介しているので
    あれこれ試してみていただけると幸いです。

    今後ともよろしくお願いします。

  • ぽち | 2012.10.15 20:21

    はじめまして。昨日BlackFlagさんのHPを拝見し設置に成功しました。

    スライドショーに’easeOutBack’を付け加えて、スライドに動きを加えたいのですが、どうしても出来ませんでした。

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

    タグも貼り付けておきます。

    jquery.easing.1.3.jsはサーバーにアップしております。

    お手数ですが、よろしくお願い致します。

  • BlackFlag | 2012.10.16 0:26

    >ぽちさん

    コメントありがとうございます。

    このコンテンツスライダースクリプトをご活用いただいているようで
    とても嬉しく思っております。

    ご質問いただきましたイージング追加についてですが
    スクリプト内にあるアニメーション動作後の

    ————————————————————
    ,slideTime);
    ————————————————————

    となっている部分に

    ————————————————————
    ,slideTime,’easeOutBack’);
    ————————————————————

    と追加することで実現可能かと思います。

    全部で3箇所あり、
    記事内で紹介しているスクリプトで言うと
    31、51、57行目あたり(3ヶ所)になります。
    (コメントに記載していただいたスクリプトは
    ちょっと長かったので非表示にさせて頂きます。)

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

  • ぽち | 2012.10.16 19:38

    ありがとうございました。無事に完成する事ができました。
    無償で対応までしていただき申し訳ない限りです。
    WEB関係のお仕事をなさっているのでしょうか?
    私はネット通販を法人で営んでおります。
    CSSやjavaを使いこなせる担当者がおらず困っておりました。
    ぜひ有料でもお願いしたいです。
    もしよろしければ今後ともお付き合いをさせていただければ嬉しいです。
    ありがとうございました。

  • BlackFlag | 2012.10.17 1:24

    >ぽちさん

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

    無事に理想どおりの動作が実装できた様で
    安心致しました。

    現在は会社に属してWeb制作関連の仕事をしておりますので
    なかなか大きな案件ベースのご依頼は
    お請けすることが難しい場合があるかとは思いますが
    何か御座いましたらご連絡くださいませ。

    よろしくお願いします。

  • syo | 2012.10.23 12:56

    こんにちは!
    サンプルとても参考になりました。
    初心者ですが、
    質問させて頂きたいと思います。
    サムネイルの画像のrolloverがcssではなくて、
    画像の切り替えしたいのですが、どうすればいいのでしょうか。
    ph01.jpg →ph01_o.jpg
    普通の画像ボタンのrolloverのような感じです。
    お手数ですが、よろしくお願い致します。

  • air | 2012.10.25 10:14

    はじめまして。
    いつも参考にさせていただいています。
    (かわいい猫たちにも癒されてます)

    こちらのスライダーを使用させていただきたいと思っているのですが
    いくつか質問させてください。

    ↑にあるぽちさんのコメントを参考に
    ’easeOutBack’等の動きを加える事が出来ましたが
    これを指定の箇所のみ追加させる事は可能ですか?
    一番最後の画像のみeasingを加えて、そこでストップさせたいのですが…。
    (ちなみに、今回はサムネールは使用しない予定です。)

    勉強不足でさっぱりわからず、お力を貸していただけましたら幸いです。
    よろしくお願いいたします。

  • syo | 2012.10.25 17:50

    こんにちは!
    認証まちですが、上記の問題はこちらで何とか解決しました。
    ありがとうございました。

  • T-J | 2012.10.27 1:07

    はじめまして、現在HP作成しておりましてこちらで勉強させて頂いております。
    1点ご教示頂きたいのですが、スライドをループスライドさせることはできないでしょうか?宜しくお願い致します。

  • BlackFlag | 2012.10.27 12:54

    >syoさん

    コメントありがとうございます。

    このコンテンツスライダーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたロールオーバーでの画像切り替えですが
    すでに無事に解決したようですが念の為、、、

    スクリプト内の29行目と35行目を削除して
    同箇所に画像のファイル名を変換させるスクリプトを記述するか
    別途その様な動きを実装できるJSを併用することで可能かと思います。

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

  • BlackFlag | 2012.10.27 12:59

    >airさん

    コメントありがとうございます。

    このコンテンツスライダーをご活用いただき
    嬉しく思っております。

    ご質問いただきました動作についてですが
    おそらくこの記事で紹介しているスクリプトで実装するよりかは
    その様な動作をするスクリプトを別途組む必要があるかと感じております。。。
    (もしくはその様なプラグインを使用するか・・・)

    またその様な動作のスライダーを作ることが出来ましたら
    ここでも紹介させていただきますね。

    よろしくお願いします。

  • BlackFlag | 2012.10.27 14:25

    >T-Jさん

    コメントありがとうございます。

    このコンテンツスライダーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたループスライドの件ですが
    このスクリプト自体がその様な想定で作っていなかったので
    ちょっとした調整だけでは厳しいかと思っています・・・

    またその様な動作のスクリプトが作れたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • T-J | 2012.10.27 23:09

    ご丁寧にご返答頂きありがとうございます。
    了解致しました。これからもこちらのサイトで勉強させて頂きます。
    ありがとうございました。

  • KIRINDOG | 2013.02.03 6:19

    はじめまして。
    サムネイル付きのシンプルなスライダーを探していてたどり着きました。
    理想のスクリプトに出会えて感激しています。

    質問があり、コメント致しました。
    サムネイル部分にカルーセルを導入したいと思い、
    「jQuery SIMPLE CAROUSEL AUTO SLIDE」
    http://black-flag.net/jquery/20120111-3643.html
    を組み込もうとしているのですが、正常に動作させることができません。
    現状はこのような感じで、サムネイルオーバーでメイン画像が全て左にスライドして空白になってしまいます。
    http://www.cafelab.tv/jQuerySimpleImageSlider/index.html

    「関数timerがかぶる」のが原因とのコメントも拝見しましたが、
    どこを修正すればよいのか、わからず悩んでいます。

    お忙しいところお手数をおかけしますが、ご教示いただければ幸いです。
    よろしくお願い致します。

  • BlackFlag | 2013.02.09 22:34

    >KIRINDOGさん

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

    ご質問いただいた件についてですが
    2つのスクリプトのうちの
    どちらかのスクリプト内にある
    下記の部分を以下の様に書き換えることで
    動作するかと思われます。

    —————————————————————————–
    timer(); → timer02();
    function timer() → function timer02()
    setTimer → setTimer02
    clearInterval(setTimer); → clearInterval(setTimer02);
    —————————————————————————–

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

  • YOSHIDA | 2013.02.27 12:26

    本当にすばらしいスクリプトありがとうございます。javascript解らないので、こちらのサイトを見つけたときはホントに救いでした。ありがとうございます。ご質問させていただきたいのですが、メイン画像のスライドがひととり終わると最後の画像から初めの画像へ巻き戻しになるような表示の仕方を、巻き戻らずにそのまま先頭の画像へスライドさせたいのですがどのようにしたらよろしいでしょうか。

    テストサンプルはこちらです。
    http://cm-creation.net/yoshida/slidertest3/

    すいません、わからないのでご足労なのですが教えていただければ幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2013.03.03 13:44

    >YOSHIDAさん

    コメントありがとうございます。
    この画像ビューアースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件ですが
    申し訳ありませんが当記事で紹介しているスクリプトでは
    その様な動作は想定していないものになります。。。

    近い動作だと、当ブログ別記事の
    ————————————————————-
    ・jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
    http://black-flag.net/jquery/20121219-4407.html
    ————————————————————-
    こちらの動作サンプルをCSSでレイアウト調整すれば
    実現できるのではないかと思っております。

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

  • ゆういち | 2013.03.26 22:03

    ありがとうございます。
    大変参考にさせていただいております。

    質問ですが、最後のサムネイルのあとの動きですが、”左側に戻る”って1枚目からリプレイではなく、
    “右側に進む”動きで1枚目からリプレイさせることは可能なのでしょうか。

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

  • BlackFlag | 2013.03.28 1:04

    >ゆういちさん

    コメントありがとうございます。

    このコンテンツスライダーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました動作の件ですが
    同じ内容でのコメントをいくつかいただいておりますが
    このスクリプト自体がその様な想定で作っていないものになりますので
    ちょっとした調整だけでは厳しいかと思っています・・・

    またその様な動作のスクリプトが用意できましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • takeshi | 2013.05.02 19:49

    こんばんは!
    よく拝見させております。

    本ページ内の下記をダウンロードし使用しているのですが、質問になります。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderClickNextBack.zip

    移動についてですが、フェードでの切り替えに変更は可能でしょうか?

    お手数をお掛けしますが、ご確認宜しくお願いいたします!

  • BlackFlag | 2013.05.03 1:30

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

    ご質問いただきました件についてですが
    当記事のスクリプトではその様な仕様は想定していなかったので
    実現するにはスクリプトのカスタマイズが必要ですが
    当ブログ別記事の
    —————————————————
    ・jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法
    http://black-flag.net/jquery/20130423-4566.html
    —————————————————
    こちらが理想の動作に近いのではないかと思っておりますが
    いかがでしょうか。

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

  • ai-kobe | 2013.05.16 23:38

    はじめまして。大変参考にさせていただいております。コメント欄でのBlackFlag様の真摯な対応には頭が下がるばかりです。
    大変恐縮なのですが質問をさせていただきます。
    こちらのスライダーを1ページの中に複数設置して機能させるには、jsをどう変えればよいのでしょうか。
    その場合でのhtmlでのdiv id は slider_main2 のように末尾に数字を付けるという形にしているんですが、これでよいのでしょうか。
    ポートフォリオサイトでの作品ページで作品毎に1スライダーを使用したいと考えております。
    まるまる全てコピペで冒頭部分のidだけ変更していけば増やせるだろうというのはわかったのですが、
    再編集時のことを考えるとあまり好ましくはないかと考えております。
    ご教授よろしくお願い致します。

  • BlackFlag | 2013.05.21 1:06

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

    当記事のスライダーの複数設置についてですが
    もともとそういった構成を想定していなかったので
    実現させるにはスクリプトの大幅なカスタマイズが必要になります。

    使用するエリアをIDではなくクラス指定に変更し
    一画面に複数設置させるパターンを用意しましたので
    下記URLよりダウンロードしてみてください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderMulti.zip

    一点、もともとの構成上、
    複数設置の場合に自動スライドさせるのが困難でしたので
    自動スライド機能は削ったパターンになります。

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

  • ai-kobe | 2013.05.23 12:52

    BlackFlag 様、そうだったんですね、わざわざ新しいスクリプトを書いていただき大変恐縮です。
    本当にわざわざありがとうございました。ぜひ活導入させていただきます。
    これからもサイトを参考にさせていただきます。

  • ai-non | 2013.05.27 12:16

    はじめまして。
    今回こちらのスライドをHPに使用させて頂きたく、参考にさせていただいております。

    素人なもので、基本的な質問になるかもしれませんが、
    メイン、サムネイル共にwidthとheightの値を変更したところ、
    (メイン width780px height 460px  サムネイルwidth195px height 115px)
    スライドした際、画像にズレがあります(メイン画像の左端に、1つ前の画像の右端が表示されます。)

    これはどのように修正をすれば良いのか、お教え頂けると大変ありがたいです。
    お手間取らせてしまいますが、よろしくお願いします。

  • BlackFlag | 2013.05.28 0:03

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

    ご質問いただきました件についてですが
    幅と高さのサイズを変更する場合は
    HTMLの<img>タグのwidthとheightの値と
    CSSで各エリアに指定しているwidthとheightの値を
    それぞれ変更する必要があります。

    その2つそれぞれを変更してもうまくいかない場合は
    CSSのブラウザリセットがされていない可能性もあるので
    CSSファイルの最初に
    ————————–
    * {
    margin: 0;
    padding: 0;
    }
    ————————–
    と追記することで解消されるかもしれません。

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

  • ai-non | 2013.05.29 1:00

    BlackFlag 様

    * {
    margin: 0;
    padding: 0;
    }

    追記したところ、問題が解消されました。

    理想的なスライダーですので、諦めがつかず、
    ご迷惑承知で思い切って質問させていただいてよかったです。

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

  • sa-bi | 2013.07.02 18:33

    BlackFlag 様

    はじめまして、スライドショーをHPに作りたく、検索を色々としていると、
    こちらのサイトに出会い、色々と参考にさせて頂いております。

    素人な質問で申し訳ないのですが、javascriptの部分を外部ファイルに書き込み、読み込む事は可能なのでしょうか?

    何卒、ご教授をお願い致します。

  • BlackFlag | 2013.07.04 0:32

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

    当ブログで紹介しているスクリプトは
    基本的にどれも外部スクリプト化することは可能です。

    スクリプトの
    ————————-
    $(function(){
      ・
      ・
      ・
    });
    ————————-
    の部分を外部化してご使用ください。

    よろしくお願いします。

  • hanzo- | 2013.07.11 18:14

    BlackFlag様

    はじめまして。いつもシンプルで分かりやすいスクリプトを公開いただき、大変ありがたく勉強させていただいております。

    ひとつご質問ですが、このスクリプトの自動スタートをオフにすることは可能でしょうか。
    もし可能でしたら方法を教えていただければ幸いです。

    不躾に申し訳ございませんが、何卒ご教授下さい。
    よろしくお願い致します。

  • BlackFlag | 2013.07.13 13:25

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

    ご質問いただきました件についてですが
    自動再生を切るにはスクリプト内のタイマー部分
    28行目、36行目、39~64行目をまるっと削除していただくことで
    実現可能かと思います。

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

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

  • fjsk | 2013.08.09 16:41

    はじめまして。
    大変参考になる記事ばかりで、初心者ながらもHPに設置することができました。
    ありがとうございます。

    しかし、自分ではわからない部分があり質問させて頂きたいのですが、
    サムネイルの左右の余白をなくす事は可能ですか?
    marginを書き換える等色々してみたのですが、自力で余白をなくす事ができませんでした。
    もし可能であればどのように書き換えれば良いか教えて頂けませんでしょうか?

    お忙しいところ申し訳ありませんが、お手隙の時にでもご回答頂けますと幸いです。
    よろしくお願い致します。

  • BlackFlag | 2013.08.10 23:20

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

    ご質問いただきました件についてですが
    当記事のサンプルで付いているサムネイルの余白は
    HTML上の<li>に対する改行によって表示しているものなので
    余白を無くすには<ul>~</ul>間の
    <li>毎に付いている改行を無くすか
    改行をコメントアウトしてみてください。

    【参考】リストをinlineで並べた時の余白 – CSS HappyLife
    http://css-happylife.com/archives/2007/1027_1735.php

    よろしくお願いします。

  • fjsk | 2013.08.13 14:34

    BlackFlag 様

    お返事ありがとうございます。
    ご親切に参考URLまで…とても助かりました。
    おかげさまで余白をなくし、理想のデザインでHPに設置する事ができました。
    本当にありがとうございました。

  • kana | 2013.09.09 15:28

    すばらしいスクリプトの公開本当に感謝いたします。
    現在こちらのスライダーを使用させていただいております。

    画像の戻り方なのですが、最後から最初に戻るときに、4→3→2→1と戻るのではなく
    4→1…と出来ないでしょうか?

    わかりにくかったらすみません。。。

    よろしくお願いします。

  • BlackFlag | 2013.09.10 23:39

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

    ご質問いただいた件についてですが
    現状の構成ではその様な動作は想定しておらず
    実現は厳しいかと思っております。。。

    またその様な仕様でのスライダーが出来ましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • Rin | 2013.11.12 11:50

    初心者ながらスライドビューを取り入れたく、しかも仕様を少しいじりたい部分もあって途方にくれていたところ、このサイトに出会えて本当に感激しております!
    全てのコメントに全て真摯に対応されているその姿勢はまるで神のようです!

    私も横移動するタイプのスライド(「前へ」「次へ」ボタンあり)を使わせていただき非常に満足しているのですが、1点だけどうしても分からないことがあって質問させて頂きます。

    例えばスライドさせたい画像が30枚あって、1~10枚目は山の写真、11~20枚目は川の写真、21~30枚目が海の写真だとします。

    そして以下のように、カテゴリ毎にulでサムネイルを分けたいと考えてます。

    「山」1 2 3 4 5
    6 7 8 9 10

    「川」11 12 13 14 15
    16 17 18 19 20

    「海」21 22 23 24 25
    26 27 28 29 30

    あくまでサムネイルを分けて表示させたいだけで、機能としては全て連番通りスライドさせたくて実際やってみたのですが、自動スライドや「次へ」ボタンなどが最初のulにしか反応してくれず、川と海は直接サムネイルをクリックする方法以外では見れないようなんです。

    どういう風に修正すれば、サムネイル分けしたまま機能するのでしょうか?

    お手隙がございましたら上記質問、是非ともよろしくお願い致します。

  • BlackFlag | 2013.11.17 11:09

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

    ご質問頂きました件についてですが
    当スクリプトではサムネイルは
    一つのulで構成する必要があります。

    ご希望としてるレイアウトを実装する場合は
    境目となるliにclassもしくはidを個別につけて
    CSSで余白などの調整をして実現するやり方になるかと考えております。

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

  • Rin | 2013.11.17 20:02

    わざわざご返答ありがとうございます!
    そうですね。わざわざul分けなくてもそう見えるようにcssで組めばいいだけですよね。
    このスライドショー気に入ってます!本当にありがとうございました。

  • ウルトラセブン | 2013.11.23 0:52

    jQueryのスライドショーを色々探して辿りつきました。
    サムネイルにポインタするだけで一々クリックする必要がない
    素晴らしくユーザービリティーなスライダーだと思います。
    ただ、もしお時間がありましたらこのスライダーをスワイプ対応して頂けないでしょうか?

    タブレット使用だと恩恵に預かれないので
    スワイプ切り替えや画像停止ができると非常に助かります。
    お時間がある時で結構ですのでご検討よろしくお願いいたします。

  • ウルトラセブン | 2013.11.23 17:12

    それと簡単な事をお聞きしたいのですがseesaaの3カラムのブログなのですが
    「メインの」一番上にこのスライダを配置したいのですが
    どのように記述すればいいのでしょうか。

    seesaaのコンテンツ配置で自由形式に貼り付けたスライダを
    一番上にもってきても、スライダの表示はなぜかフッダーの部分にしか表示されないのです。
    初歩的な質問ですがよろしくお願いします。

  • BlackFlag | 2013.11.26 0:46

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

    ご質問いただきました件についてですが
    フリック動作コンテンツスライダーに関しては
    当ブログ別記事にていくつか用意しておりますので
    そちらをご参考いただければと思っております。

    http://black-flag.net/tag/%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF

    主にサムネイルはクリック動作になっておりますが
    スクリプト部分の「.click()」部分を「.hover()」に変えることで
    マウスオーバーでの動作に変更することが可能かと思っております。

    seesaaブログに関してはこちらでは判断しづらいですが
    HTMLソースがきちんとカラム上部に記載されていれば動作すると思っております。

    下に配置される原因はスライダースクリプトとは直接関連性はないと思われますので
    seesaaブログのHTML構成等をご確認ください。

    よろしくお願いします。

  • とわ | 2013.11.28 16:59

    こにんにちは。
    こちらのスクリプトが探していた条件にピッタリで、ありがたく使わせていただいています。

    ひとつだけ困っていることがありまして、質問させていただきます。
    サムネにリンクを貼って、ロールオーバーのときはメインスクリーン切り替え(フェード)、クリックのときはページ遷移するようにしてます。

    iPadやiPhoneで見た場合なのですが、
    ①スライダーのページを表示
    ②サムネクリックでページ遷移
    ③ブラウザの戻るボタンでもどる。
    ④スライダーがオートで始まらない(クリック時のメインスクリーンのまま)
    という現象が起きています。

    戻った際にページがリロードされればよいかと考え、スクリプトの1行目に
    $(window).unload(function(){});
    を入れてみましたが、改善されませんでした。

    こちらの解決策にお心当たりがありましたら、アドバイスいただけないでしょうか。

    お忙しいところ恐れ入りますが、よろしくお願いいたします。

  • BlackFlag | 2013.11.30 11:27

    >とわさん

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

    ご質問いただいた件についてですが
    もともとiPhone、iPad想定では作っていませんでしたが
    仰っている現象はクリック時にフォーカス状態(hover状態)に
    なったままになっている影響かと思われますので、
    読み込み時には「$(setThumbId + ‘ ul li’)」に対して「.blur();」を入れて、
    ページロード時にはリストからフォーカスを外す方法などはいかがでしょうか。

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

    よろしくお願いします。

  • ひなの | 2013.12.08 21:31

    初めまして。こちらのスクリプトを使って勉強をさせていただいています。
    1点質問をさせてください。

    スライダーの動きなのですが、サンプルで画像の1枚目~4枚目まで動いた後に逆送りのような形で1枚目が表示されていますが、これを4枚目から1枚目へ逆戻りせず表示することはできますか?

    4枚目が左側にスライドした後にすぐ1枚目が現れるようにしたいのですが。。

    初心者なので分かりにくい質問でスミマセンが、ご教授いただけると嬉しいです。
    よろしくお願いします。

  • とわ | 2013.12.11 20:26

    お忙しいのにアドバイスありがとうございます。

    ですがアドバイスいただいた内容が、私の能力では理解できなくてどう書いたらよいのかわからず、いろいろ検索して調べてみました。

    しかし能力不足で具体的な記述がわからなくて。。。
    試行錯誤して、スクリプトの最初に
    window.onpageshow = function() {
    $(‘#slider_thumb ul li:first’).blur();
    }
    等書いてみましたが、なにも変化ありませんでした。

    アドバイスしてくださった内容は、上記の記述で正しいのでしょうか?
    大変恐縮ですが、ご助言ただけると嬉しいです。

  • とわ | 2013.12.12 14:09

    何度も申し訳ありません。

    いろいろ試行錯誤した結果、hover時のfanctionに
    if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
    window.onpageshow = function() {
    $(setThumbId + ‘ ul li’).css({opacity:’0′}).removeClass(‘active’);
    }
    timer();
    }
    を加えることで解決しました。
    サムネイルの現在位置の表示を同期させることは難しかったので断念し、リロード時にはactiveの効果をなしにすることで妥協しました。

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

  • kao | 2013.12.14 10:41

    こんにちわ。
    こちらのスライダーに出会い、使用させていただいております。

    質問なのですが、各サムネイルの下にリンクと共に文字を入れたいのですがどのようにすれば良いのでしょうか?
    (○○はこちら!みたいなやつです。)
    初心者のため簡単、ぶしつけな質問で申し訳ございません。

    宜しくお願いいたします。

  • BlackFlag | 2013.12.14 10:44

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

    ご質問いただいた件についてですが
    現状の仕様ではその様な動作は
    カスタマイズだけでは厳しく思っております。

    またその様な動作仕様のスライダーが出来ましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • BlackFlag | 2013.12.14 10:51

    >とわさん
    ご連絡ありがとうございます。

    無事に解決して理想の動作が実現できた様で
    安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • BlackFlag | 2013.12.15 11:58

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

    サムネイル表示の件についてですが
    HTML部分にサムネイル部分の記述がありますので
    その中にテキスト及びリンクタグを記述していただき
    CSS側でレイアウト調整をしていただければ実現できると思います。
    (スクリプトは特に変更する必要はありません)

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

  • kao | 2013.12.16 11:21

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

    色々調べてはいるのですが、
    どうしても文字が写真の下にいかず、右側にいってしまいます。
    どのようにCSSで調整すればいいのでしょうか?

    よろしければお時間あるときで結構ですのでご教授いただけたらと思います。

    よろしくお願いします。

  • BlackFlag | 2013.12.21 13:28

    >kaoさん
    どのように組み込まれているのか
    実際の画面を確認できない限り何とも言えないのですが
    サムネイル部分を構成する要素のblock要素かinline要素か、といった問題なのかと思われます。

    文字が右にいってしまうという事象も
    実装されようとしている画面構成(HTMLやCSS)を見ない限り不明なのですが
    brを入れて改行させるか、文字自体をタグで囲ってblock要素にする、などの
    方法があるかと想定しています。

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

  • kao | 2013.12.23 13:41

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

    構成はそのままコピペして写真等のみ変えて使用させていただいております。
    brタグも使用してみたのですが、文字と共に他のサムネイル写真まで下段に落ちてしまいました。

    頑張って試行錯誤してみます。

    お時間いただきありがとうございました。

  • siam | 2013.12.26 11:30

    はじめまして、スライダーを探してここへたどり着きました。
    凄く欲しかったスライダーがありましたのでさっそく使わせて頂きました。
    スクリプトに関して全くの無知なので大変助かりました!有難うございます!

    1つ質問よろしいでしょうか?
    当方Justsystemのネットショップオーナーを使用してページを制作しているのですが
    ヘッダー部分がいじれない仕様の為、bodyに直接書き込んでいます。
    またCSSに関しては既存のファイルに追加記入をして動作は確認しました。
    スライダー画面のズレがあったので、ここへ回答されていました
    ———————————
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    li {
    list-style: none;
    }
    ———————————
    を追加した所問題は解決いたしましたが、
    すべてのページからborderが消えてしまいました。

    スライダーだけにborder: 0;を反映する方法は無いでしょうか?
    大変申し訳ございませんが、お時間ある時で結構ですのでご教授お願い致します。

  • siam | 2013.12.28 12:13

    追記です。
     border: 0; 
    だけではなく
     margin: 0; padding: 0;も同じくお願い致します。

  • BlackFlag | 2013.12.28 16:16

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

    CSSリセットの件についてですが
    スライダー部分にのみ反映させるには
    ———————————
    #slider_main,
    #slider_main *,
    #slider_thumb,
    #slider_thumb * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    #slider_main li,
    #slider_thumb li {
    list-style: none;
    }
    ———————————
    この様な形でスライダーメイン部分とサムネイル部分のみ
    指定するようにしてみてください。

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

  • siam | 2014.01.06 11:44

    BlackFlag様

    新年あけましておめでとうございます。

    早速のご返事有難うございます!
    表示も問題なく無事に設置することが出来ました。
    本当に助かりました、有り難うございました。

  • hiroyuki | 2014.03.15 1:00

    自社のショッピングサイトでスライダーを使うことになり知識がなかったので困り果てていた時に
    こちらのサイトを見つけて使わせていただきました。とても丁寧に説明していただいていてコメントからの質問にも親切でとても勉強になりました。
    とても感謝しています。ありがとうございました。
    これからも購読して勉強させていただきます。

  • BlackFlag | 2014.03.15 19:02

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

    このコンテンツスライダーがサイト制作のお役に立った様で
    嬉しく思っております。
    その様なお言葉をいただけるととても有難く励みにもなります。

    他にもサイト制作に役立つように
    スクリプトを紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • meg | 2014.06.09 12:02

    初めまして☆
    楽天でショップを運営しておりまして、いつもこちらのサイトを参考にさせて頂いております。

    現在こちらのページのコンテンツスライダーを使用してますが
    サムネイルをメインの右下に重ねる事は可能でしょうか?

    jQuery SIMPLE SLIDESHOW【SAMPLE3】
    ↑こちらの様な場所にサムネイルを置きたいのです。

    jQuery初心者なもので、考えてもまったくわからず…
    調べてあれこれ試しましたがどれも上手くいきません。

    お忙しいところ申し訳ございませんが、アドバイスお願いします(>_<)

  • BlackFlag | 2014.06.11 0:36

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

    サムネイルを重ねる件ですが
    スクリプト動作には影響しない部分になりますので
    CSSでの対処になるかと思います。

    やり方は色々とあると思いますが
    メインエリアとサムネイルエリア全体を
    もう一つのブロック要素で囲い
    それぞれを「position:absolute」で重ねることで
    実現できるかと思います。

    参考までにCSSを調整して重ね合わせるパターンサンプルを用意しましたので
    必要であれば下記URLよりダウンロードしてみてください。

    http://black-flag.net/devel/jQuerySimpleImageSlider/jQuerySimpleImageSliderThumbOver.zip

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

  • tony&mitch | 2014.07.10 15:29

    はじめまして
    こちらのスライダーを利用させていただいています。

    早速ですが、サムネイルの部分をカルーセルにできませんか?

    件数が増えると2段にわたるので…

  • BlackFlag | 2014.07.11 0:27

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

    当ブログのTipsをまとめたページ
    ————————————
    ・jQuery / CSS3 TIPS
    http://black-flag.net/jquery/20120801-4016.html
    ————————————
    こちらにカルーセル用のスクリプトも紹介させていただいておりますので
    ご参考にしてみてください。

    よろしくお願いします。

  • エスエス | 2014.08.23 11:00

    サムネイル対応のスライダー機能を探していてこちらにお邪魔しました。

    要望は、
    サムネイルマウスオバーで切り替え →こちらのスライダーで対応

    サムネイルクリックで外套のページにリンク → 対応可能でしょうか。

    スライダーの方向を右から左へのフェードイン一方向のみにしたい→可能でしょうか。

  • BlackFlag | 2014.08.24 12:30

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

    2はサムネイルに普通にリンクを張れば大丈夫ではないでしょうか。
    3は仰っている動作がよく分かりませんでした。

    よろしくお願いします。

  • こひなた | 2015.01.07 4:29

    はじめまして。
    jQueryのスライドショーを調べていたところ、こちらのサイトに辿り着きました。
    サイトのTOPに使わせていただきます。

    突然で申し訳ないのですが、
    このスライドを右寄せにすることは可能でしょうか。
    無知なもので、試行錯誤してみたものの、上手く出来ずに……。

    左側に画像を載せて、右側にスライドを載せたいのです。
    お忙しい所、申し訳ございません。お手数ですが、教えて頂けると幸いです。

  • BlackFlag | 2015.01.07 19:37

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

    スライダーのレイアウト変更については
    スクリプト動作には影響しない部分になりますので
    CSSでの対処になるかと思います。

    やり方は色々とあると思いますが
    メインエリアとサムネイルエリア全体を
    もう一つのブロック要素で囲い
    それぞれを「position:absolute」を使って位置調整することで
    いろいろと調整ができるかと思います。

    当記事のコメント内で「2014.06.11 0:36」に記載したものに
    レイアウト変更したパターンのサンプルも用意しておりますので
    併せてご確認いただければと思います。
    ※レイアウト自体はご希望とされている形と違うかもしれませんが…

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

  • 泰三 | 2015.05.12 1:16

    初めまして。
    当方、ホームページ制作を勉強中の身でして
    サムネ付きコンテンツスライダーを探していたところ
    中々思い通りのものが見付からない中、こちらのサイトを発見し
    大変有難く拝見させて頂いております。

    なお、不躾ながら突然の質問なのですが…

    メイン画像描写エリアの規定をスライダー非表示として設定。
    サムネをマウスオーバー中のみスライド描写、
    サムネエリア外へポイントが消失した場合、非表示へ戻す動作は適用可能範疇でしょうか?
    【例】
    サムネ①~④を順にマウスオーバー⇒メイン画像①~④をスライダー表示
    マウスポインターを別コンテンツへ移動⇒メイン画像描写エリア非表示

    無茶振りで申し訳ないです…。

  • BlackFlag | 2015.05.13 1:05

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

    ご質問いただいた件についてですが
    その様な動作のスライダーを作ることは可能だと思いますが
    当記事のスライダーではその様な仕様での想定はしておらず
    実現させるには大幅なカスタマイズ(もしくは新規作成)をする
    必要があると考えております。

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

    よろしくお願いします。

  • 泰三 | 2015.05.13 21:58

    >BlackFlagさん

    早速のお返事どうもありがとうございます。
    やはり大幅なカスタマイズが必要ですか…。

    あれから、未熟ながら記載頂いているサンプルコードをベースに紐解きながら対応方法に頭を捻っております。
    (その中でも当HPの別ページなど丁寧に解説されており大変ためになります!)
    今回の件は、未だ解は出ておりませんが、こういう作業も勉強になりますし楽しいものですね。

    ご質問の件は、早々に他力本願としてしまった事を反省するとともに
    ご回答に対しお礼申し上げます。
    これからもよろしくお願い致します。

  • BlackFlag | 2015.05.14 1:33

    >泰三さん
    ありがとうございます。

    私も時間に余裕があればサンプル等を作ることも可能なのですが
    しばらくの間はその様な時間を取る余裕がなく…申し訳ありません。

    他のスクリプトと併せて
    いろいろとお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

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

jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR