先日ここでレスポンシブ対応のスライドショーの試作品として
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題して
jQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを
紹介しましたが、操作面に関してフリック操作には対応していなかったので、
メイン部分にフリック動作を追加してみたパターンを試しに作ってみたので紹介してみます。

jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法

レスポンシブ動作部分はブラウザ枠を目いっぱいで表示するタイプなので
まずは別枠表示で動作サンプルから。。

jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法

サンプルでは6枚の画像を自動でスライド切り替えしています。
メインビジュアル部分をフリックすることで左右に移動させることができ
下に並べてあるサムネイルをクリックすることでも
メインビジュアル部分を切り替えることができる形になっています。
(左右のNEXT/BACK透過ボタンで画像を切り替えることも可。)

サンプルでは最大幅を「800px」最小幅を「320px」として
ブラウザ幅によってスライドショー部分が拡大縮小します。(どちらの値も変更可)

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

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

◆HTML
<div class="flickSlider">

<div class="flickView">
<ul>
<li><a href="#1"><img src="img/photo1.jpg" alt=""></a></li>
<li><a href="#2"><img src="img/photo2.jpg" alt=""></a></li>
<li><a href="#3"><img src="img/photo3.jpg" alt=""></a></li>
<li><a href="#4"><img src="img/photo4.jpg" alt=""></a></li>
<li><a href="#5"><img src="img/photo5.jpg" alt=""></a></li>
<li><a href="#6"><img src="img/photo6.jpg" alt=""></a></li>
</ul>
</div><!--/.flickView-->

<div class="flickThumb">
<ul>
<li><img src="img/photo1.jpg" alt=""></li>
<li><img src="img/photo2.jpg" alt=""></li>
<li><img src="img/photo3.jpg" alt=""></li>
<li><img src="img/photo4.jpg" alt=""></li>
<li><img src="img/photo5.jpg" alt=""></li>
<li><img src="img/photo6.jpg" alt=""></li>
</ul>
</div><!--/.flickThumb-->

</div><!--/.flickSlider-->

クラスやIDを付けた全体を囲う任意のブロック要素「.flickSlider」の中に
メインビジュアル部分のブロック要素「.flickView」と
サムネイル部分のブロック要素「.flickThumb」を配置し
それぞれの中に<ul>リストを使って画像を並べます。
(メインビジュアルの画像は<a>タグで囲ってありますが
リンクする必要がない場合はこのタグは不要です。)

サンプルでは画像を6つにしていますが
これを増減させるには単純に<li>の数をそれぞれ同じ個数増減するだけです。

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

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

◆CSS
/* .flickSlider
--------------------------- */
.flickSlider {
	margin: 0 auto;
	text-align: left;
	display: none;
}

/* .flickView
--------------------------- */
.flickSlider .flickView {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.flickSlider .flickView ul {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	overflow: hidden;
}
.flickSlider .flickView ul li {
	width: 100%;
	float: left;
	display: inline;
	overflow: hidden;
}
.flickSlider .flickView ul li img {
	width: 100%;
}

/* .flickThumb
--------------------------- */
.flickSlider .flickThumb {
	width: 100%;
	overflow: hidden;
}
.flickSlider .flickThumb ul {
	width: 110%;
}
.flickSlider .flickThumb ul li {
	float: left;
	cursor: pointer;
	display: inline;
}
.flickSlider .flickThumb ul li img {
	width: 100%;
}
.flickSlider .flickThumb ul li.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

/* sideNavi
------------------------- */
.flickSlider .btnPrev,
.flickSlider .btnNext {
	top: 0;
	width: 5%;
	height: 100%;
	position: absolute;
	cursor: pointer;
}
.flickSlider .btnPrev {
	left: 0;
	background: #ccc url(../img/btnPrev.png) no-repeat center center;
}

.flickSlider .btnNext {
	right: 0;
	background: #ccc url(../img/btnNext.png) no-repeat center center;
}


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

.flickSlider .flickView ul,
.flickSlider .flickThumb ul {
	display: inline-block;
	overflow: hidden;
}

スライドショー部分の幅や高さは
スクリプト側から制御するので
CSS側では幅100%だけ入れておきます。

ブラウザ幅の判別などもスクリプト側で制御するので
CSSでのメディアクエリー指定も特に使用しておりません。
(実際にページに組み込む際にはページのレイアウト制御等々で使用することになると思いますが)

スライド左右の透過NEXT/BACKボタン部分の
色など見た目はCSSで指定しておきます。

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

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$(window).load(function(){
		var setWrap = $('.flickSlider'),
		setMainView = $('.flickView'),
		setThumbNail = $('.flickThumb'),
		setMaxWidth = 800,
		setMinWidth = 320,
		thumbNum = 6,
		thumbOpc = 0.5,
		scrollSpeed  = 500,
		delayTime = 5000,
		easing = 'linear',
		sideNavi = 'on', // 'on' or 'off'
		autoPlay = 'on'; // 'on' or 'off'

		var agent = navigator.userAgent;
		setWrap.each(function(){
			var thisObj = $(this),
			childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiLink = mainLi.children('a'),mainLiImg = mainLi.find('img'),
			childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'),
			mainWidth = parseInt(childMain.css('width')),mainHeight = parseInt(childMain.css('height')),listCount = mainUl.children('li').length;

			thisObj.css({display:'block'});

			// レスポンシブ動作メイン
			imgSize();
			function imgSize(){
				var windowWidth = parseInt($(window).width()),
				setUlLeft = parseInt(mainUl.css('left')),
				setlistWidth = parseInt(mainLi.css('width')),
				setLeft = setUlLeft / setlistWidth;

				if(windowWidth >= setMaxWidth) {
					thisObj.css({width:setMaxWidth});
					childMain.css({width:setMaxWidth});
					mainUl.css({width:((setMaxWidth)*(listCount))});
					mainLi.css({width:setMaxWidth});

					var listWidthA = parseInt(mainLi.css('width')),
					leftMax = -((listWidthA)*((listCount)-1)),
					baseHeight = mainLiImg.height();
					childMain.css({height:baseHeight});
					mainUl.css({height:baseHeight});
					mainLi.css({height:baseHeight});

					thumbUl.css({width:setMaxWidth});
					thumbLi.css({width:((setMaxWidth)/(thumbNum)),height:''});
				} else if(windowWidth < setMaxWidth) {
					var listWidthB = parseInt(childMain.css('width')),
					leftMax = -((listWidthB)*((listCount)-1));
					thisObj.css({width:setMaxWidth});
					if(windowWidth >= setMinWidth) {
						thisObj.css({width:'100%'});
						childMain.css({width:'100%'});
						mainUl.css({width:((listWidthB)*(listCount))});
						mainLi.css({width:(listWidthB)});
					} else if(windowWidth < setMinWidth) {
						thisObj.css({width:setMinWidth});
						childMain.css({width:setMinWidth});
						mainUl.css({width:((setMinWidth)*(listCount))});
						mainLi.css({width:setMinWidth});
					}
					var reHeight = mainLiImg.height();
					childMain.css({height:reHeight});
					mainUl.css({height:reHeight});
					mainLi.css({height:reHeight});

					var reWidth = setThumbNail.width();
					thumbUl.css({width:reWidth});
					thumbLi.css({width:((reWidth)/(thumbNum))});
				}

				var adjLeftWidth = parseInt(mainLi.css('width')),
				adjLeft = adjLeftWidth * setLeft;
				mainUl.css({left:(adjLeft)});
			}
			imgSize();
			$(window).resize(function(){
				if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
					if(autoPlay == 'on'){clearInterval(setTimer);}
					imgSize();
					if(autoPlay == 'on'){slideTimer();}
				} else {
					imgSize();
				}
			});

			// フリックアクション
			var isTouch = ('ontouchstart' in window);
			mainUl.on(
				{'touchstart mousedown': function(e){
					if(mainUl.is(':animated')){
						e.preventDefault();
					} else {
						if(autoPlay == 'on'){clearInterval(setTimer);}
						if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.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 = thumbUl.children('li.active'),
					listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1));

					if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
						$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed,easing);
						setThumbLiActive.each(function(){
							$(this).removeClass('active');
							$(this).next().addClass('active');
						});
					} else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
						$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed,easing);
						setThumbLiActive.each(function(){
							$(this).removeClass('active');
							$(this).prev().addClass('active');
						});
					} else if(this.leftBegin === 0) {
						$(this).stop().animate({left:'0'},scrollSpeed,easing);
					} else if(this.leftBegin <= leftMax) {
						$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
					} else if(this.left >= 0) {
						$(this).stop().animate({left:'0'},scrollSpeed);
					} else if(this.left <= leftMax) {
						$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
					} else {
						$(this).stop().animate({left:(this.leftBegin)},scrollSpeed,easing);
					}
					compBeginLeft = this.leftBegin;
					compThisLeft = this.left;
					mainLiLink.click(function(e){
						if(!(compBeginLeft === compThisLeft)){
							e.preventDefault();
						}
					});
					if(autoPlay == 'on'){slideTimer();}
				}
			});

			// ボタン移動動作
			thumbLi.click(function(){
				if(autoPlay == 'on'){clearInterval(setTimer);}
				var listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1)),
				connectCont = thumbLi.index(this);
				mainUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed,easing);
				thumbLi.removeClass('active');
				$(this).addClass('active');
				if(autoPlay == 'on'){slideTimer();}
			});
			thumbLiFst.addClass('active');
			thumbLi.css({opacity:thumbOpc});

			// サイドナビボタン(有り無し)
			if(sideNavi == 'on'){
				childMain.append('<div class="btnPrev"></div><div class="btnNext"></div>');
				var setPrev = childMain.find('.btnPrev'),setNext = childMain.find('.btnNext'),setPrevNext = childMain.find('.btnPrev,.btnNext');
				setPrevNext.css({opacity:thumbOpc});

				setNext.click(function(){
					var setThumbLiActive = thumbUl.children('li.active');
					setThumbLiActive.each(function(){
						var listLengh = thumbLi.length;
						var listIndex = thumbLi.index(this);
						var listCount = listIndex+1;
						if(listLengh == listCount){
							thumbLiFst.click();
						} else {
							$(this).next('li').click();
						}
					});
				});
				setPrev.click(function(){
					var setThumbLiActive = thumbUl.children('li.active');
					setThumbLiActive.each(function(){
						var listLengh = thumbLi.length;
						var listIndex = thumbLi.index(this);
						var listCount = listIndex+1;
						if(1 == listCount){
							thumbLiLst.click();
						} else {
							$(this).prev('li').click();
						}
					});
				});
			}

			// サムネイルマウスオーバー
			if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
				thumbLi.hover(function(){
					$(this).stop().animate({opacity:'1'},300);
				},function(){
					$(this).stop().animate({opacity:thumbOpc},300);
				});
				if(sideNavi == 'on'){
					setPrevNext.hover(function(){
						$(this).stop().animate({opacity:'1'},300);
					},function(){
						$(this).stop().animate({opacity:thumbOpc},300);
					});
				}
			}

			// 自動再生(有り無し)
			if(autoPlay == 'on'){
				function slideTimer() {
					setTimer = setInterval(function(){
						var setThumbLiActive = thumbUl.children('li.active');
						setThumbLiActive.each(function(){
							var listLengh = thumbLi.length;
							var listIndex = thumbLi.index(this);
							var listCount = listIndex+1;
							if(listLengh == listCount){
								thumbLiFst.click();
							} else {
								$(this).next('li').click();
							}
						});
					},delayTime);
				}
				slideTimer();
			}
		});
	});
});
</script>

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

var setWrap = $(‘.flickSlider’) スライダー全体を囲うブロック要素名(IDでも可)
setMainView = $(‘.flickView’) メインビジュアル部分を囲うブロック要素名(IDでも可)
setThumbNail = $(‘.flickThumb’) サムネイル部分を囲うブロック要素名(IDでも可)
setMaxWidth = 800 スライダー部分の最大幅
setMinWidth = 320 スライダー部分の最小幅
thumbNum = 6 一行に並べるサムネイル数
thumbOpc = 0.5 サムネイルの非アクティブ時の透過度
scrollSpeed = 500 スライドアニメーションスピード
delayTime = 5000 スライドアニメーション待機時間
easing = ‘linear’ スライドアニメーションのイージング指定
sideNavi = ‘on’ 左右NEXT/BACKの表示/非表示(非表示の場合は「off」等)
autoPlay = ‘on’ 自動切換え動作のON/OFF(自動切換えさせない場合は「off」等)

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

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

画像サイズ(比率)によって各エリアの幅と高さを取得して制御していることもあり
使用する(切り替える)画像は全て幅と高さを同サイズのものを使用する必要があります。

サンプルではサムネイルを1行に6つ全て並べていますが
「thumbNum = 6」を「3」とすることで1行に3つ並べて2行にわたって表示する形になります。

「sideNavi = ‘on’」を「off」とすれば左右のボタンは表示されなくなります。
(記述は「off」でなくても「on」じゃなければ何でもいいです・・・)

1ページ内に複数設置する場合は自動スライド機能は一つ目のスライダーのみにしか動作しないので
必要なければ「autoPlay = ‘on’」を「off」としていただければと思います。
(こちらも記述は「off」でなくても「on」じゃなければ何でもいいです・・・)

左右のボタン非表示、サムネイル3個2行表示、自動切換え動作を止めてスライドアニメーションにイージングを追加、各メイン画像クリックで外部リンクを追加したパターンのサンプルを別枠で表示

iPhoneやAndroid端末でも動作するハズ。
レスポンシブ対応のフリックスライダーを実装する際にぜひ。。。

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

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

Related Posts

Comments (82)

  • チョコ | 2013.05.28 20:36

    自社HPの制作を担当しているものです。
    black-flagに紹介されているような、「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショー」の使用に関してご質問ですが、ライセンスはどのようになっているのでしょうか?
    ライセンスに関してもあまり、詳しいわけではないのですが、こちらのプログラムはMITでしょうか?

    再配布や、販売ではなく、自社のHPに使用したいです。

    black-flagのHP内にライセンスに関して記載されていましたら、申し訳ありません。

  • BlackFlag | 2013.05.28 20:56

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

    当ブログのスクリプトのご使用をご検討されているようで
    とても嬉しく思っております。

    「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショー」の
    スクリプト使用に関して、
    個人・商用問わず、ご自由に使用していただいてかまいません。

    権利表記もリンクも特に必要ありません。
    (リンクを張っていただけると嬉しく思いますが、全く強制ではありません)

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

    よろしくお願いします。

  • チョコ | 2013.05.29 10:39

    ありがとうございます。

    大変助かります。
    これからも、宜しくお願いします。

  • 担当者 | 2013.06.06 13:05

    ありがとうございました。
    使わせて頂きました!!

  • BlackFlag | 2013.06.07 1:03

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

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

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

  • かずこ | 2013.07.21 18:50

    こんにちは!いつもこちらのサイトを参考にさせて頂いてます!
    フリックスライダー(サムネイル付)のことで分からない事があったので、
    質問させていただきました。

    スライダーメイン部分の両サイドにある矢印のことです。

    ——————————————————————————————
    // サイドナビボタン(有り無し)
    if(sideNavi == ‘on’){
    childMain.append(‘●●’);
    ——————————————————————————————
    の黒丸へ文字を入力したのですが、両サイドにあるナビバーの上部へ文字が表示されてしまいます。
    やり方が間違っているのでしょうか?・・・
    こちらのサンプルにあるように中心に記号を表示するにはどこを編集すればいいでしょうか。

    また、下部サムネイルを●や■に変更する事は可能でしょうか?
    お忙しいところへすみません!!
    図々しいとは思いますが、是非やり方を教えて頂けないでしょうか。

  • BlackFlag | 2013.07.24 1:37

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

    ご質問いただきました
    左右のボタンの見た目などカスタマイズについては
    CSSにて制御しておりますので
    CSS内の「.btnPrev」「.btnNext」の部分を変更してみてください。

    下部のサムネイルについては
    現状では●や■には対応しておりません。。

    またそのパターンでのサンプルが出来ましたら
    ここで紹介させていただきたいと思います。

    よろしくお願いします。

  • かずこ | 2013.07.24 16:30

    こんにちは!

    CSS内の「.btnPrev」「.btnNext」の部分を変更してみようと思います。

    又、新しいパターンの作品も楽しみにしています。
    貴重なお時間に返答頂きまして、本当にありがとうございました。

  • Nasca | 2013.09.20 17:56

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

    こちらのフリックスライダースクリプトを使用してWordpressの記事内に複数画像がある際にスライダーで表示できるように変更しているのですが、
    サムネイル部分左端よりもスライダーの左側が左へ飛び出してしまっており、
    画像がスライドすると一つ前の画像の一部(右端25px分くらい)が表示された状態になってしまっています。
    また、btnPrev自体も左に飛び出して表示されている状態です。

    btnPrevの表示位置自体はcssの該当部分、left値の修正で表示は直るのですが、View部分の画像の飛び出しが上手く修正できない状態です。

    変更点いたしましてはsetMaxWidthを600、setMinWidthを200に変更したくらいですが、
    Viewクラス以下ul・li、サムネイル部分などはスライダー処理の頭で自動的に挿入するように変更しております。
    cssは上記に書かれているものをコピーして使用しております。

    また、上記とは別件にはなりますが、
    こちらのフリックスライダーを改造したものをテンプレートデザインに組み込み配布したいのですが、再配布は大丈夫でしょうか?

  • BlackFlag | 2013.09.23 13:33

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

    ご質問いただいた件についてですが
    実際の実装されている画面や全体構成を確認してみないと何とも言えないのですが
    スクロールバーの有無の影響もあるかと思われますので
    CSSに
    ————————
    body {
    overflow-y: scroll;
    }
    *html body {overflow-y: auto;}
    *:first-child+html body {overflow-y: auto;}
    ————————
    これらを追記してみてください。

    ライセンス等に関しては特に設けておりませんので
    再配布していただいても構いません。
    (クレジット等記載していただけると嬉しく思いますが、全く強制ではありません)

    よろしくお願いします。

  • puni | 2013.11.13 16:59

    はじめまして。いつも参考にさせていただいております。

    1つ質問をさせてください。

    グローバルナビにdroppyを組み込んでいるページに、こちらの
    「jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)」
    を追加で組み込んだところ、
    フリックスライダーは動くのですが、
    グローバルナビが動かなくなりました。

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
    この一文をいれると、
    droppyの機能がストップしてしまう、という所までは判明したのですが、
    解決策が解らず…という状況です。

    ページにもともと組み込んでいるjsは、
    ・jquery-1.4.2.min.js
    ・jquery.cookie.js
    ・jquery.droppy.js
    ・smoothScroll.js
    です。

    もし、解決策のお心当たりがありましたら、
    お教えいただけますと、とても有り難いです。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2013.11.17 11:49

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

    ご質問頂きました件についてですが
    それぞれのスクリプトが対応しているjQueryのバージョンが違う影響と思われるので
    ドロップダウン用のスクリプトをjQuery1.9系で動く別のものに変更するか
    1ページ内でjQueryの複数のバージョンを扱う方法にて構成する必要があるかと思います。

    1ページ内でjQueryの複数のバージョンを扱う方法については
    「jquery 複数バージョン」などで検索することで色々なやり方が出てくるので
    フリックスライダーは1.9、droppyは1.4を使用する構成にしてみてください。

    よろしくお願いします。

  • puni | 2013.11.17 20:03

    お返事を頂きましてありがとうございます。
    バージョン問題とは、お恥ずかしながら気づきませんでした。
    さっそく、アドバイス頂いた方法を調べてみます。
    ありがとうございました!

  • tumi | 2013.12.05 16:08

    はじめまして。
    フリックスライダーを使用させていただきました。
    簡単に導入できとても便利なのですが、1つ質問させてください。

    現状3枚のスライドを表示させている状態です。
    1~3枚目までは、右に進むイメージなのですが、3枚目から1枚目に戻る際に、左に戻る動きをするかと思います。
    この動きに関して、1枚目に戻る際にも右へ進むイメージにカスタマイズは可能でしょうか。

    もし、実現できるようであればお教えいただけますと幸いです。
    よろしくお願い申し上げます。

  • 神戸っ子 | 2013.12.06 19:13

    非常に参考になるので、いつも拝見しています。
    レスポンシブ機能がとても気に入って、写真のスライドショーに導入を検討していますが、縦画像の場合に半分あたりで切れてしまい、設定もうまくできません^^;
    解決策がありましたら、ご教授をお願いできませんでしょうか。

  • BlackFlag | 2013.12.06 19:29

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

    ご質問いただきました件についてですが
    当記事のスクリプトではその様な動作は想定しておらず
    全体の仕様構成に絡む部分になりますので
    簡単なカスタマイズだけでは実現は厳しそうです。。

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

    よろしくお願いします。

  • BlackFlag | 2013.12.06 19:34

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

    ご質問いただきました件についてですが
    ここで紹介しているスクリプトは記事内にもある通り
    画像サイズ(比率)によって各エリアの幅と高さを取得して制御していることもあり
    使用する(切り替える)画像は全て幅と高さを同サイズのものを使用する必要があります。

    無理やり縦画像を合間に入れ込む場合は
    縦向き画像ファイル自体に左右の余白をつけて
    横向き画像と同じサイズにすることで可能かと思っております。

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

  • 神戸っ子 | 2013.12.06 20:23

    お忙しい中、早速のコメントありがとうございます。

    記事内に注意事項が書かれていたのを今知りました^^;
    試しにファイル自体に細工を施してみたいと思います。

  • java初心者 | 2014.01.19 11:29

    初めまして。
    様々なスライダーを試用・比較してきましたが、
    1番わかりやすくて素敵なスライダーだと思い、コメントさせていただきました。
    本当に素敵なスライダーですね。

    ところで、li内にテキストを入れて使用することはできないでしょうか?
    画像+テキストにするとテキストが消え、
    テキストのみにすると真っ白になってしまいます。

    簡単なカスタマイズで実現可能ならご教授いただきたく存じます。

  • BlackFlag | 2014.01.23 1:17

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

    ご質問いただきました件についてですが
    全体の仕様として画像の大きさでスライドエリアのサイズを決めているので
    画像の使用は必須となります。

    テキストを重ねる場合はCSSにて、
    liに対して「position:relative」をつけて
    テキスト要素をabsoluteにして
    画像の上に重ねて配置する構成にすることで
    実現可能だと思います。

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

  • れいらんこ | 2014.03.14 17:28

    いつもこちらのサイトを参考にさせて頂いてます。
    初心者の私でも設置ができました。
    ありがとうございます。

    フリックスライダー(サムネイル付)のことで分からなかったのでご質問させていただきました。

    Nascaさんと似たかんじなのですが、

    まず画像のサイズが800×500なので

    下記の部分を修正しました。
    setMaxWidth = 800,
    setMinWidth = 500,

    スライダーは動いてくれるのですが、画像の下部が切れてしまいます。
    そして、ちょうどボタン部分ぐらいの幅が右にずれて表示されてしまいます。
    2枚目には1枚目の画像が左ボタン部分に少し表示され、2枚目の画像が右ボタン部分の途中で切れ、
    3枚目にかぶる感じです。
    CSSに下記のタグを追加したのですが、下記のタグを追加しても改善されませんでした。

    ————————
    body {
    overflow-y: scroll;
    }
    *html body {overflow-y: auto;}
    *:first-child+html body {overflow-y: auto;}
    ————————

    どのようにしたらよいでしょうか?
    お手数なのですが、よろしくお願いいたします。

  • BlackFlag | 2014.03.15 19:26

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

    ご質問いただきましたズレの件についてですが
    おそらくCSSのブラウザリセットがされていない影響かと思っております。

    ページ上にCSSブラウザリセットの記述を追加していただくか
    フリックスライダースクリプトのCSSに対して
    —————————–
    .flickSlider,
    .flickSlider * {
    margin: 0;
    padding: 0;
    }
    —————————–
    を追記していただければ
    解消されるのではないかと思っております。
    お試しください。

    併せて、
    setMaxWidth = 800,
    setMinWidth = 500,
    の2行目は高さの値ではなく
    ウィンドウ幅を縮めた時にスライド全体の縮小動作を止める
    最小幅の値になっております。
    (スクリプトで高さの値は記述しない構成になっています)

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

  • れいらんこ | 2014.03.18 1:55

    早々のご回答ありがとうございます。

    表示できました!
    本当にありがとうございます。

  • れいらんこ | 2014.05.06 3:12

    以前にもご質問させていただいたものです。

    たびたびすみません。
    今度はサムネイルがずれてしまいました。

    どのように修正したらよろしいでしょうか?
    お忙しいとは思いますが、お時間がある時に教えていただけますと助かります。

  • BlackFlag | 2014.05.06 23:42

    >れいらんこさん
    サムネイルがずれるという件ですが
    サンプル画面を確認させていただきましたが
    おそらくCSSファイル内で「.flickSlider .flickView」に対して追記されている
    「left: 19px;」が原因だと思いますので
    そのプロパティを削除してみてください。

    よろしくお願いします。

  • れいらんこ | 2014.05.09 17:41

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

  • yamanii | 2014.06.25 17:32

    初めまして、お世話になります。yamaniiと申します。
    フリックスライダースクリプトを導入させていただくべく制作作業中です。
    いろいろ探した末、ようやくこれだ!というものに出会えてうれしく思っております。

    インストールまでは本当にイージーに出来たのですが、(わかりやすくて素晴らしい!)
    ちょっとカスタムしようと思い、、つまづきました…。

    大きい画面のスライダー部分の幅(初期で800pxの部分)よりもサムネイルエリア全体の幅をせばめたいと考えております。
    幅740px程度(両側に30pxずつくらいの余白があれば。厳密ではないです。)の中でサムネイルがオーバーフローしないように並ぶことが出来たら良いと思っています。
    cssをいじったり、慣れないjavascriptの中身を触るチャレンジを試みましたがうまく行かず…。

    勝手に使わせていただいている身で恐縮なのですが、解決策をご教授いただけると幸いです。(URLが製作中の物です。)
    お手数ですが何卒宜しくお願い致します。

  • BlackFlag | 2014.06.29 1:15

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

    ご質問いただきました件についてですが
    当記事のスライダーは基本構成として
    サムネイルは幅めいっぱいになっております。

    間隔をあけるとする場合は
    サムネイル画像を余白をつけた画像を使用する、
    等の方法になるかと思っております。

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

  • yamanii | 2014.06.29 22:33

    お世話になります。yamaniiです。
    回答ありがとうございました。

    そうですか、全体の幅は同一でないとダメなのですね。
    了解致しました。
    左右両端だけは余白付けたいと思っていたのですが、
    まあ、いっぱいの幅で行ってみます。
    ありがとうございました!

  • Yamada | 2014.07.07 12:20

    いつも御世話になっています。
    ネットでレスポンシブ制作を検索するとやはりこちらに辿り着きます。
    ネット独学でレスポンシブサイト制作中ですが不明な事ばかりで悩みます。
    当サイトの「ウィンドウサイズによって読み込む画像を切り替える」で、
    ヘッドのPC,スマホ、タブレット切り替えは完璧に出来ました。
    PC画面で頭デッカチだった画像が解消できました。本当に有難うございます。
    また、当ページのフリックスライダーも導入しています。
    PC画面、スマホ画面では上手くサイズがフィットいたします。
    ただタブレットでのサイズの場合上手くフレキシブルに伸縮せず
    main領域を超えてsub領域に画像がはみ出してしまいます。
    きっと何かの記述が必要なのだろうと想像致しますがお教え頂けると有難いです。
    素人の質問でお手間を取らせ本当に申し訳ありません。
    どうか宜しくお願い致します。

  • BlackFlag | 2014.07.11 0:15

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

    ご質問いただきました件についてですが
    もともと当記事のフリックスライダーは
    カラム分けしたレイアウトでの使用は想定しておりませんでした。

    なにか解消策がないか考えてみましたが
    全体の構成的に厳しいかもしれません。。

    またその様な使用でも可能なフリックスライダーが出来ましたら
    ここで紹介させていただきたいと思います。

    よろしくお願いします。

  • Yamada | 2014.07.11 12:21

    お世話になります。
    ご回答ありがとうございます。
    私も素人ですが自分なりにいろいろソースを触ってみましたが駄目でした。
    しかし、タブレット閲覧時に縦も横も駄目なら致しかたないですが、
    今の所、横使いでは全く問題はありません。
    とても気に入っているギャラリーですのでこのまま使わせて頂きます。

    また、「ウィンドウサイズによって読み込む画像を切り替える」は非常にいいですね♪
    ヘッダー及び、フッター。そして本文内とフル活用させて頂いております。
    お蔭でPC画面での異様な大きな画像を消すことが出来て助かっています。
    また、今後ともどうか宜しくお願い致します。
    ご回答に感謝いたします。

  • HK | 2014.07.15 17:38

    初めまして、HKと申します。

    この度、自社Webサイトで利用可能なスライダーを探しておりましたところ、
    コチラに巡り合い、更にフリーとの事で、大変ありがたく存じます。

    つきましては、Web製作して組み込んでおりましたところ、
    複数画像を、データベースサーバーから読み込んで表示させたいのですが、
    画像の存在位置の指定の仕方を詳しく教えて頂けますと幸甚です。
    例えば、javascript中に
    addPic(
    ‘写真1のファイルパス’,
    ‘写真2のファイルパス’,
    ‘写真3のファイルパス’,
    ..
    )
    等と指定すればよいのか、このプログラムの動作のさせ方となります。
    画像を最大10枚程と考えております。

    その他、View部分の画像の飛び出し等は、コメント掲載を拝見させて頂き、
    非常にスムーズに修正が出来感謝致しております。

    誠に恐縮ではございますが、
    何卒ご教授の程、宜しくお願い申し上げます。

  • BlackFlag | 2014.07.17 1:00

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

    ご質問いただきました件についてですが
    実装されようとしている全体構成がよく分からずにおります。。

    当記事のフリックスライダースクリプトでは
    画像の位置(パス)はHTML側に記述する構成になっておりますが
    データベースサーバから読み込むとは
    ajax等を使用してスクリプト側でHTMLソースを生成する、ということでしょうか。

    その様な場合はHTMLソースを生成後に
    当記事のフリックスライダースクリプトが実行されるようにすることで
    動作するようになるかと思っております。

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

  • HK | 2014.07.18 16:45

    BlackFlagさん

    早速のお返事、誠にありがとうございます。

    BlackFlag さんのご回答を、弊社開発担当者に伝えてみます。
    もし、また分からない事がございましたら、ご教授頂けますと幸甚です。

    今後とも宜しくお願い致します。

    お忙しい処、ありがとうございました。

    敏速なご回答に感謝申し上げます。

  • Mahka | 2014.07.27 20:05

    はじめまして。
    いつも参考にさせていただいてます。
    とても分かりやすくて勉強になります。

    このたび、フリックスライダーを使わせていただいたのですが、
    サムネイルが正しく表示されないため、ご質問させていただきました。
    19点の画像があり
    thumbNum = 10 とすると
    11枚目がサムネイルに表示されませんでした。
    thumbNum = 9 はうまくいきますが、
    thumbNum = 11 は、12枚目が飛ばされてしまいます。

    とても気に入っているので、何とかうまく表示させたいと思考錯誤したのですが
    素人の私には難しいようで…
    良い解決方法をご教授いただけると幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2014.07.29 1:11

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

    ご指摘いただきました件
    こちらでも検証してみたところ
    サムネイル10個以上になると
    次のリストが枠外へはみ出てしまうことを確認しました。

    スクリプトを調整して
    記事内およびサンプル画面とダウンロードファイルに反映致しましたので、
    お手数ですが再度ご確認いただければと思っております。

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

  • Mahka | 2014.07.29 17:55

    BlackFlagさま

    さっそくのご対応、本当にありがとうございました!
    再ダウンロードさせていただいたところ、うまく動きました。
    さすがです。感動です。
    古いものも残してあるので、どこが変わっているのか
    じっくり勉強させていただきたいと思います!

    本当にありがとうございました。
    今後ともどうぞよろしくお願いいたします。

  • みるみる | 2014.08.06 10:41

    BlackFlagさま
    こちらのサイトには大変お世話になっております。
    現在フリックスライダーを利用しております。
    とても使いやすいので、スクリプト開始部分にある設定値のみhtmlファイルに記載して複数ページで利用したいと考えています。
    jsのみ外部ファイルとして読み込む程度はできるのですが、上記のようなコントロールができず困っています。
    基本的なことを伺っているとしたら恥ずかしいのですが、簡単に解決できる問題でしたらお手空きの時にご回答いただけると助かります。

  • BlackFlag | 2014.08.09 10:51

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

    ご質問いただきました件についてですが
    当記事のスクリプトはプラグイン化しているものではないので
    その様な構成での使い方は難しいかと思っております。

    スクリプト部分をプラグイン化していただくか
    ページ毎に外部JSファイルを個別に用意する、
    といった形になってしまうかと思っております。

    よろしくお願いします。

  • みるみる | 2014.08.11 14:46

    BlackFlagさま

    ご回答ありがとうございます。
    そういうことなんですね。理解できました。。
    私の力量だとプラグイン化は少し時間がかかりそうなので、
    当面このまま利用させていただきます。(^^)
    今後ともよろしくお願い致します。

  • まるねこたん | 2014.09.06 21:58

    BlackFlagさまスライドショーをブログにて使用させていただきました。私はwebの知識は殆ど有りませんので、こんなにも素晴らしいスライドショーをご提供して頂き本当に有り難う御座います。最高のスライドショーでしかもセンスが凄くいいです!心から感謝申し上げます。

  • BlackFlag | 2014.09.07 13:24

    >まるねこたんさん
    コメントありがとうございます。

    このフリックスライドショーがお役に立ったようで
    その様なお言葉をいただけると励みになり嬉しく思います。

    出来る限りシンプルで使い勝手のよいスクリプト構成を心掛けて
    他にも色々とサンプルを紹介させていただいておりますので
    あれこれ試していただけると幸いです。

    よろしくお願いします。

  • まるねこたん | 2014.09.11 10:41

    BlackFlagさま返信有り難うございます!本当はBlackFlagさまが作られたスライドショーをブログの上部(メイン画像)いっぱいいっぱいに配置したかったのですが今の私にはそれが実現出来ていません、6枚のメイン画像が用意出来ていないのと、私のwebの知識ではおかしな事が沢山おこってしまいます(笑)ソースの表示が (!)←こいつでいっぱいだったりします(笑)でもいつかメイン画像をBlackFlagさまのスライドショーで動かしたいです。本当に最高のjQueryスライドショーです!そもそもjQueryって言う物を私は理解していないんですけど(笑)こんな私に最高のスライドショーを本当に有り難うございました。

  • TAKA | 2014.11.05 19:22

    BlackFlagさま

    Flicksliderをスマホページ用に使用させて頂きました。

    フリックとサムネイルはうまくいったのですが
    1点メインヴィジュアル部分の画像を指で上下にタッチして
    画面をスクロールしようとすると、先にフリックが反応してしまって
    スクロールができません。

    何か解決方法などありますでしょうか?
    よろしくお願いいたします。

  • BlackFlag | 2014.11.09 1:23

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

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

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

    よろしくお願いします。

  • さゆり | 2014.11.11 13:13

    はじめまして。
    とても綺麗な動きなので、使用させて頂きたいと思っております!
    1点質問がございます。よろしいでしょうか?
    特定の画像へ、
    別ページからのリンク指定で飛ばすことは可能でしょうか?
    例えば、<a href=”#2″ rel=”nofollow”></a>
    の画像へ。
    色々試してみたのですが、うまくいかずに困っております。
    もし解決策がございましたらご教授頂けると幸いです。

  • BlackFlag | 2014.11.12 2:24

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

    ご質問いただきました動作につきましては
    当ブログ別記事の
    —————————————
    ・jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル
    http://black-flag.net/jquery/20101014-1597.html
    —————————————
    こちらの記事の「2012.05.03 22:51」のコメントにて
    同様の動作をサンプル付きで掲載させていただいておりますので
    ご参照いただけますでしょうか。
    (コメント内に記述してある「.btn_act」のクラス部分が
    当記事のサンプルで実装する場合は「.flickThumb ul li」となります。)

    実際の動作はページが表示された後に
    該当サムネイル番号をクリックさせる動作になるので
    スライドするアニメーションも実行される形になります。

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

  • さゆり | 2014.11.12 18:35

    BlackFlagさま

    お忙しいお返事誠にありがとうございます。
    試させて頂きます。
    取り急ぎのお礼コメントとなります!

  • ろん | 2014.11.13 22:25

    はじめまして。
    本日、拝見しましてさっそくサンプルを活用してやってみました。
    おかげさまでいいギャラリーができそうです。

    なんとか、できたのですが画像点数が多くてサムネイルが6行にもなり、
    サムネイルの下に余白が出てしまいます。
    2行になっているサンプルのJSにもしてみましたが同じでした。
    そこでメインの画像の下にもサムネイルと同じような
    余白を入れたいと思うのですがどうすればいいでしょうか。
    (この余白を数値で調整できるでしょうか。)
    すみませんがご指導よろしくお願い申し上げます。

  • BlackFlag | 2014.11.14 19:17

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

    画像の下の余白についてですが
    CSSにて「.flickSlider .flickThumb ul li img」に対して
    「vertical-align:bottom;」を追加することで
    解消されると思います。

    画像下に適宜余白をつけるには
    「.flickSlider .flickThumb ul li」に対して
    上か下に「padding」を設定するなどして調整してみてください。

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

  • ろん | 2014.11.15 8:46

    BlackFlag さま
    早速のご回答ありがとうございます。

    おかげさまで無事余白の調整をすることができました。
    jQueryの紹介サイトは多いのですが、いろんな状況に対応できる解説が
    あるサイトは限られます。
    そういう意味でもこちらのサイトは親切で非常に助かっております。
    今後も活用させていただきます。

  • ゆうゆう | 2014.12.16 15:38

    はじめまして。

    これは!と思い利用させていただくことにしました。

    画像5つスライドさせているのですが、メイン画像の左部分に前の画像が少し表示されてしまい、見た目的に右にずれている状態となってしまっております。

    —————————–
    .flickSlider,
    .flickSlider * {
    margin: 0;
    padding: 0;
    }
    —————————–

    をcss内に追記してみたところ、画像のずれはなおったのですが、
    フリックスライダーの表示位置自体が左寄せになってしまいました。
    上記を追記する前は画面の真ん中に表示されていたのですが。

    これはどのような記述をcssにすれば解消するでしょうか?
    デザインが超初心者なもので。。、

    よろしければご教授ねがいます。

  • ゆうゆう | 2014.12.16 17:38

    すいません。

    .flickSlider,
    .flickSlider * {
    margin: 0 auto;
    padding: 0 auto;
    }

    にしたところ解決しました。
    お騒がせして申し訳ございませんでした。

  • R | 2015.04.06 5:45

    はじめまして、大変便利で使用したいと思っています。

    そこで質問ですが現在、setMaxWidth = 800,を560に変更して使用しよと考えています。
    PCでの動作は問題ないのですが、スマホで横に向けて縦に戻すと高さだけが伸びた上体になり
    スクロールすると正常の高さに戻ります。

    ちなみに800の場合だと正常に動きます。

    すいません。説明が下手で、、以上宜しくお願いいたします。

  • BlackFlag | 2015.04.12 11:49

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

    ご質問いただいた件ですが
    サイズによってスマホで縦横切り替え動作が微妙になる事があるようですね。。
    その様な場合はスクリプト90行目あたりに
    スマホ縦横切り替え動作でサイズ調整の関数を実行させるようにすることで
    解消されるかと思っております。

    参考ページも用意しましたので
    下記URLからスクリプトを確認してみてください。
    http://black-flag.net/devel/jQueryResponsiveFlickSlider/index560.html

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

  • memikoro | 2015.04.29 11:00

    はじめまして。
    ほぼ初心者ですが、こちらのサイトはとてもわかりやすく、度々使用させていただいております。

    こちらのサムネイルですが、非アクティブのときに黒い透過やグレーなどにすることは可能でしょうか?
    文字入りのバナーなので、どうもうるさい感じになるのが気になりまして…
    ご教授いただければと思います。
    よろしくお願いいたします。

  • BlackFlag | 2015.04.29 23:01

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

    ご質問いただいた件ですが
    非アクティブの時はサムネイル画像を表示させない、
    ということでよろしいでしょうか。

    そのような場合は、CSSの44行目から56行目を
    ——————————————
    .flickSlider .flickThumb ul li {
    float: left;
    cursor: pointer;
    display: inline;
    background: #ccc;
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    }
    .flickSlider .flickThumb ul li img {
    filter:alpha(opacity=0)!important;
    -moz-opacity: 0!important;
    opacity: 0!important;
    }
    .flickSlider .flickThumb ul li.active img {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    }
    ——————————————
    この様に書き換えることで実現可能になるかと思います。
    (サムネイルロールオーバー動作も無効にしています。)

    liリストに指定している背景色が
    非アクティブ時のカラーになるので
    適宜調整してください。

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

  • memikoro | 2015.04.30 23:04

    ご返信ありがとうございます。
    実装してみたところ、サムネイル消えました。(色つきになりました)
    ただ、大変恐縮なんですが、ロールオーバーのときは元のサムネイル画像が表示というようにはできないでしょうか?
    説明不足で二度手間になり申し訳ありませんが、どうぞよろしくお願いいたします。

  • nukomame | 2015.05.03 0:20

    はじめまして。

    わかりやすく充実した内容で非常に勉強になっています。
    1つ行き詰まってしまったので質問させてください。

    スライドの最初と最後の画像をつなげて一方向にぐるぐるとループさせたいと考えています。
    具体的には、「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」のような形です。
    http://black-flag.net/devel/jQueryResponsiveFullWideSlider/
    2つのソースを見比べつつ試行錯誤しているのですが、自分のスキルではループさせることができませんでした。。。

    もしお時間がありましたらヒントやアドバイスをいただけませんでしょうか。
    よろしくお願いいたします。

  • BlackFlag | 2015.05.07 0:31

    >memikoroさん
    ロールオーバーでの表示制御についても
    CSSでの制御になると思いますが
    最後のセレクタにhover状態のものを追加してみてください。
    —————————————
    .flickSlider .flickThumb ul li:hover img,
    .flickSlider .flickThumb ul li.active img {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    }
    —————————————

    フェードアニメーションさせる場合は
    CSSアニメーションの設定を追加することで
    可能になるかと思います。

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

  • BlackFlag | 2015.05.07 0:40

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

    ご質問いただいた内容ですが
    「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」
    のスライド移動を止めることなく動かし続ける、ということでしょうか。。

    スクリプトの「delayTime」の値がスライドアニメーションの
    待機時間になりますので、ここの値を「0」にすることで
    ループし続ける形になるかと思います。

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

  • nukomame | 2015.05.09 18:56

    > BlackFlagさん

    ご丁寧な回答ありがとうございます!
    説明が分かりづらかったようで大変申し訳ございません。

    私がやりたかったのは、1枚目の画像と最後の画像が連結した360度スクリーン(筒状)のような状態です。

    現状では最後の画像にたどり着くと、逆回転しなければ最初の画面に戻れません。
    これをせず一方通行で最初の画像を表示させるにはどうすればいいのかと悩んでいた次第です。。。

    「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」では、画像が反対方向に向かうことなく一方向に回転し続けていたので、それをこのサンプルにも応用できないかと試行錯誤していました。

    ちなみに、今回みたいな変なことに挑戦しなければ正常に動作します。

  • BlackFlag | 2015.05.13 0:40

    >nukomameさん
    当記事のスライダーでは、その様な動作は想定していないので
    実装には大幅なカスタマイズが必要になるかと思います。

    「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を
    並べたコンテンツスライダーを設置する実験」や当ブログ別記事の
    ———————————————————–
    ・jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法
    http://black-flag.net/jquery/20150120-5537.html
    ———————————————————–
    でも同様の仕様の動作は実装しておりますので
    ひとまずはそちらを参考にしてみていただけると幸いです。

    よろしくお願いします。

  • nukomame | 2015.05.13 15:33

    > BlackFlagさん

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

    やっぱり簡単にはいかないんですね。
    ご教示いただいたページを参考に
    もう一度がんばってみたいと思います。
    ご丁寧にありがとうございました。

    それと遅ればせながら、
    すばらしいサンプルを公開してくださり大変感謝しています!

  • sig | 2015.07.15 14:42

    はじめまして。フリックスライダーをありがたく使用させていただいています。

    質問なのですが、アニメーションの種類を設定する「easing」のパラメータは、linear以外に何がありますか?
    スライドの最後の写真のあと、最初の写真を表示する際に巻き戻るようなアニメーションになりますが、これを他の写真間のアニメーションと同じにすることはできますか?

    よろしくお願いします。

  • BlackFlag | 2015.07.16 1:35

    >sigさん
    コメントありがとうございます。
    当記事のフリックスライダーをご活用いただいている様で
    ありがとうございます。

    ご質問いただきました動作につきましては
    jQueryのイージングにつきましては
    —————————
    ・jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】
    http://black-flag.net/jquery/20120530-3883.html
    —————————
    こちらをご参照ください。

    スライドアニメーションについては
    現状の動作以外は想定していないので
    派手な動きにする場合などはスクリプトの改修が必要になるかと思います。

    よろしくお願いします。

  • sig | 2015.07.17 17:36

    > BlackFlagさん
    ご回答ありがとうございます。
    easing処理のプラグインで行えるアニメーション以外は、自分で改変する必要があるということですね。
    とりあえず、easingをいろいろ試してみようと思います。
    ご丁寧にありがとうございました。

  • 松井 | 2015.10.11 2:45

    はじめまして。
    とても分かりやすいサイトなので大変助かります。

    こちらのスライドショーの下の写真が多くなった場合にリキッドカルーセルパネルで表示させたいのですが、
    単体でリキッドカルーセルパネルの設定はありますが、このスライダーと合体させるにはどの様にしたらよいのでしょうか?

    よろしくお願いします。

  • BlackFlag | 2015.10.12 19:48

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

    当スクリプトではサムネイル部分に関して
    カルーセル対応はしておりません。

    その様な形状にする場合は
    imgSize()の関数部分で実装している
    サムネイルのサイズ調整である「thumbUl」「thumbLi」等を削除することで
    当スクリプトでサムネイルのサイズ調整を行わない構成にして、
    サムネイル画像に対して何か別のリキッドカルーセルプラグインを実装することで
    実現させることができるかもしれません。

    憶測の想定になってしまいますが
    お試しください。

    よろしくお願いします。

  • 松井 | 2015.10.19 14:18

    > BlackFlagさん
    ご回答ありがとうございます。

    別ページ記載のCSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 で
    Lightbox風モーダルウィンドウを開いた後にこちらのフリックスライダーを表示させたいのですが
    html ファイルを開かせるのは無理なのでしょうか?
    もしくはこちらのサンプルの中にLightboxからhtmlを立ち上げる方法は記載されてますか?

  • BlackFlag | 2015.10.24 22:25

    >松井さん
    CSSのモーダルウィンドウでHTMLファイルを読み込む場合は
    あまり適切な方法ではないかもしれませんが
    モーダルウィンドウ内でiframeを使用する構成であれば
    実現できるのではないかと思います。

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

  • mikako | 2015.12.21 13:57

    はじめまして、自社サイトの制作をしております。

    これまでは、トップページに1枚の大バナーを表示していましたが
    大バナーで告知したいコンテンツが増えましたため、
    4枚のバナーをスライドで表示させることになり、
    是非FlickSliderを使用させていただきたいと思っております。

    すみませんが2点ほど教えていただきたく、問い合わせさせていただきました。

    (1)
    DLさせて頂いたソースを既存のサイトに組み込み、
    Firefox、Chromeでは問題なく表示・動作できたのですが
    IEのみ横幅が小さく表示されてしまいました。
    (動作確認したIEは8と10で、いずれも同じ状態でした)

    そのため
    setMinWidth = 320
    を setMaxWidth と同じ752に変更しましたところ、
    IEでも正しいサイズで表示されるようになりました。
    (スライダーバナー画像の横幅は既存のコンテンツにあわせて752pxにしております)

    (2)
    続いてiPhoneのsafariで動作確認をしましたところ、
    http~のURLでは問題なかったのですが、
    https~ではスライダー部分が表示されなかったため、外部リンクの
    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js を
    https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    と変更しましたところ、スライダー部分が通常に表示されるようになりました。

    (1)(2)いずれも、上記のように変更して差し支えありませんでしたでしょうか?
    Javascriptにつきまして知識不足でして、お手数おかけして申し訳ありませんが
    問題があるようでしたら、ご返答頂けますと幸いです。

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

  • BlackFlag | 2015.12.24 1:35

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

    ご質問いただきました件についてですが
    (1)についてはどのような現象になっているのかが
    ちょっと分からずにいるのですが、
    当記事のサンプルでも同様の現象が起こっているということでしょうか。

    (2)に関しては実装されているサイトが「https」の場合は
    jQueryの読み込みも「https」にする必要があります。
    もしくはどちらでも対応できるように「http」は外してしまって
    「//」から始まるようにしてもらっても大丈夫かと思います。
    (その場合、ローカルだとスクリプトが実行されなくなる場合もあるのでご注意ください)

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

  • mikako | 2015.12.25 15:30

    > BlackFlagさん

    さっそくご返答いただきまして、大変ありがとうございました。

    (1)についてですが、説明不足ですみません。
    IEですと、flickSliderクラス部分が全体的にぎゅっと縮小され、左寄せで表示される状態になりました。
    縮小サイズは320px×170px (本来ですと752×170)だったため、
    setMinWidth = 320 を setMinWidth = 752 に変更しましたところ、
    IEでも正しい横幅で表示されるようになりました。

    なお、BlackFlagさんのサンプル記事や、スライダー部分のみをローカルで作成したファイルは
    IEでも正常に表示されましたので、既存コンテンツの何かが影響しているのだと思います。

    setMinWidth = 752に変更することで、現在のところどのブラウザでも
    問題なく表示・動作できているのですが
    もしsetMaxWidthとsetMinWidthを同じ値にすると問題あるようでしたら
    ご教示頂けますと大変助かります。(自分でも調べてはおりますが…知識不足ですみません)

    (2)につきましては、ご返答頂いた内容で対応し、無事解消されました!
    ありがとうございました。

  • BlackFlag | 2015.12.26 21:41

    >mikakoさん
    サンプルではその様な事象が起こっていないようでしたら
    実際に組み込まれているデータを確認させていただかないと
    対処方法など判断がつかないのですが・・・

    setMaxWidthとsetMinWidthを同じ値にした場合、
    レスポンシブのようなウィンドウサイズによって
    スライダーのサイズが変化しなくなってしまうかと思いますが
    スクリプト自体がおかしな動作をすることは無いと思っています。

    よろしくお願いします。

  • とまと | 2016.03.24 16:35

    このスライダーを最初はdisplay:none;で非表示にして、ボタンクリックでモーダルウインドウ、またはアコーディオンで表示させたいと思っています。

    ですがそうするとメイン部分がheight:0;にhなってしまい、画像が表示されません。
    サムネイルをクリックしてもその状態は変わりません。

    この問題を解決する方法はあるでしょうか?
    お忙しいところ恐れ入りますが、アドバイスよろしくお願いいたします。

  • BlackFlag | 2016.04.02 10:37

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

    ご質問いただいた件ですが
    アコーディオンを開いた際に
    このスライドスクリプトを実行させる必要があると思うので
    全体を関数化してアコーディオンが開いた際に実行させるか
    アコーディオンを開いた際に現状スクリプトの「imgSize()」を
    実行させるようにしてみてはいかがでしょうか。

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

    よろしくお願いします。

  • ike | 2017.05.18 19:37

    はじめまして、いつも参考にさせていただいております。
    メインである「flickView」の横幅とサムネイル「flickThumb」の横幅を異なるようにしたいのですが可能でしょうか?
    現在はsetMaxWidth=800で、ビュー画像が800、サムネイルも枚数応じて800で収まる仕様になっていますが、例えばビュー800、サムネイル1200というようにしたいのです。

    欲を言えばPCは上記のように、スマホはデフォルト(両方揃う800)のように出来ると良いのですが…いろいろと触ってみていますがどうも上手くできません。

    この問題を解決する方法はあるでしょうか?
    お忙しいところお手数ですが、アドバイスよろしくお願いいたします。

  • BlackFlag | 2017.05.21 11:13

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

    このスライダースクリプトではメインイメージ部分とサムネイル部分の幅の指定を
    それぞれスクリプト側から指定してしまっているのですが
    サムネイル部分に関してはスクリプト側から幅の指定を外すことも可能です。

    スクリプト動作からサムネイル部分の幅の指定を外したパターンのサンプルを
    用意しましたので下記からご覧ください。
    http://black-flag.net/devel/jQueryResponsiveFlickSlider/jQueryResponsiveFlickSliderTumbWide/

    データは一式下記よりダウンロードできます。
    http://black-flag.net/devel/jQueryResponsiveFlickSlider/jQueryResponsiveFlickSliderTumbWide.zip

    このサンプルではサムネイル部分の幅の指定を特にしていないので
    CSS側からメディアクエリーを使ってお好みに合わせて
    サイズの調整をしてみていただければと思います。

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

  • ike | 2017.05.22 15:35

    >BlackFlagさま
    早速ご回答いただきありがとうございます。
    また、ファイルまでご用意いただき、大変ありがたいです。
    jsを書き換えcssも修正したところ、PCスマホともに理想的なものになりました。

    正直諦めていたのですが大変助かりました。
    ありがとうございました!

  • BlackFlag | 2017.05.23 19:48

    >ikeさん
    無事に理想とされている形で実装できたようでよかったです。
    ご報告ありがとうございました。

    当ブログではほかにもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

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

jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法

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