以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが
やはり今後はサイト上に設置するスライドショー関連も
レスポンシブに対応している必要が出てくることは必至なので
試しに作ってみたのを紹介してみます。
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法
今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので
まずは別枠表示で動作サンプルから。。
「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示
サンプルでは6枚の画像を自動でクロスフェードで切り替え、
下に並べてあるサムネイルをクリックすることでも
メインビジュアル部分を切り替えることができる形になっています。
（左右のNEXT／BACK透過ボタンで画像を切り替えることも可。）
サンプルでは最大幅を「800px」最小幅を「320px」として
ブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可）
簡単な動作仕様については以上になります。
全体構成についてまずはHTMLから。
◆HTML <div class="slideShow"> <div class="mainView"> <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><!--/.mainView--> <div class="thumbNail"> <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><!--/.thumbNail--> </div><!--/.slideShow-->
クラスやIDを付けた全体を囲う任意のブロック要素「.slideShow」の中に
メインビジュアル部分のブロック要素「.mainView」と
サムネイル部分のブロック要素「.thumbNail」を配置し
それぞれの中に＜ul＞リストを使って画像を並べます。
（メインビジュアルの画像は＜a＞タグで囲ってありますが
リンクする必要がない場合はこのタグは不要です。）
サンプルでは画像を6つにしていますが
これを増減させるには単純に＜li＞の数をそれぞれ同じ個数増減するだけです。
ページネーションや左右のNEXT／BACKボタンは
スクリプト側から生成するようにしているので
HTMLには記述しません。
そしてCSSは以下の様になります。
◆CSS
/* .slideShow
------------------------- */
.slideShow {
margin: 0 auto;
text-align: left;
display: none;
}
/* .mainView
------------------------- */
.slideShow .mainView {
width: 100%;
position: relative;
overflow: hidden;
}
.slideShow .mainView ul {
width: 100%;
overflow: hidden;
position: relative;
}
.slideShow .mainView ul li {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
.slideShow .mainView ul li img {
width: 100%;
}
/* .thumbNail
------------------------- */
.slideShow .thumbNail {
width: 100%;
overflow: hidden;
}
.slideShow .thumbNail ul {
width: 110%;
}
.slideShow .thumbNail ul li {
float: left;
display: inline;
overflow: hidden;
cursor: pointer;
}
.slideShow .thumbNail ul li img {
width: 100%;
}
.slideShow .thumbNail ul li.active {
filter: alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
top: 0;
width: 5%;
height: 100%;
position: absolute;
z-index: 100;
}
.slideShow .mainView .btnPrev {
left: 0;
background: #ccc url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
right: 0;
background: #ccc url(../img/btnNext.png) no-repeat center center;
}
/* =======================================
ClearFixElements
======================================= */
.slideShow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.slideShow 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 = $('.slideShow'),
setMainView = $('.mainView'),
setThumbNail = $('.thumbNail'),
setMaxWidth = 800,
setMinWidth = 320,
thumbNum = 6,
thumbOpc = 0.5,
fadeTime = 1000,
delayTime = 5000,
sideNavi = 'on', // 'on' or 'off'
autoPlay = 'on'; // 'on' or 'off'
setWrap.each(function(){
var thisObj = $(this),
childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'),
childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last');
thisObj.css({width:setMaxWidth,display:'block'});
mainLi.each(function(i){
$(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'});
mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
});
thumbLi.click(function(){
if(autoPlay == 'on'){clearInterval(setTimer);}
var connectCont = thumbLi.index(this);
var showCont = connectCont+1;
mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});});
mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});});
$(this).addClass('active');
$(this).siblings().removeClass('active');
if(autoPlay == 'on'){timer();}
});
thumbLi.css({opacity:thumbOpc});
thumbLiFst.addClass('active');
// メイン画像をベースにエリアの幅と高さを設定
var mainLiImg = mainLi.find('img'),
baseWidth = mainLiImg.width(),
baseHeight = mainLiImg.height();
// レスポンシブ動作メイン
imgSize();
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= setMaxWidth) {
thisObj.css({width:setMaxWidth});
childMain.css({width:baseWidth,height:baseHeight});
mainUl.css({width:baseWidth,height:baseHeight});
mainLi.css({width:baseWidth,height:baseHeight});
thumbLi.css({width:((setMaxWidth)/(thumbNum))});
} else if(windowWidth < setMaxWidth) {
if(windowWidth >= setMinWidth) {
thisObj.css({width:'100%'});
childMain.css({width:'100%'});
mainUl.css({width:'100%'});
mainLi.css({width:'100%'});
} else if(windowWidth < setMinWidth) {
thisObj.css({width:setMinWidth});
childMain.css({width:setMinWidth});
mainUl.css({width:setMinWidth});
mainLi.css({width:setMinWidth});
}
var reHeight = mainLiImg.height();
childMain.css({height:reHeight});
mainUl.css({height:reHeight});
mainLi.css({height:reHeight});
var reWidth = setThumbNail.width();
thumbLi.css({width:((reWidth)/(thumbNum))});
}
}
$(window).resize(function(){imgSize();});
imgSize();
// サムネイルマウスオーバー
var agent = navigator.userAgent;
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'},200);
},function(){
$(this).stop().animate({opacity:thumbOpc},200);
});
}
// ボタン移動動作
function switchNext(){
var setActive = thumbUl.find('.active');
setActive.each(function(){
var listLengh = thumbLi.length,
listIndex = thumbLi.index(this),
listCount = listIndex+1;
if(listLengh == listCount){
thumbLiFst.click();
} else {
$(this).next('li').click();
}
});
}
function switchPrev(){
var setActive = thumbUl.find('.active');
setActive.each(function(){
var listLengh = thumbLi.length,
listIndex = thumbLi.index(this),
listCount = listIndex+1;
if(1 == listCount){
thumbLiLst.click();
} else {
$(this).prev('li').click();
}
});
}
// サイドナビボタン（有り無し）
if(sideNavi == 'on'){
childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = thisObj.find('.btnPrev,.btnNext');
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
btnPrevNext.css({opacity:thumbOpc}).hover(function(){
$(this).stop().animate({opacity:'0.9'},200);
},function(){
$(this).stop().animate({opacity:thumbOpc},200);
});
} else {
btnPrevNext.css({opacity:thumbOpc});
}
btnPrev.click(function(){switchPrev();});
btnNext.click(function(){switchNext();});
}
// 自動再生（有り無し）
if(autoPlay == 'on'){
function timer(){
setTimer = setInterval(function(){
switchNext();
},delayTime);
}
timer();
}
});
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| var setWrap = $(‘.slideShow’) | スライドショー全体を囲うブロック要素名（IDでも可） |
|---|---|
| setMainView = $(‘.mainView’) | メインビジュアル部分を囲うブロック要素名（IDでも可） |
| setThumbNail = $(‘.thumbNail’) | サムネイル部分を囲うブロック要素名（IDでも可） |
| setMaxWidth = 800 | スライドショー部分の最大幅 |
| setMinWidth = 320 | スライドショー部分の最小幅 |
| thumbNum = 6 | 一行に並べるサムネイル数 |
| thumbOpc = 0.5 | サムネイルの非アクティブ時の透過度 |
| fadeTime = 1000 | フェードアニメーションスピード |
| delayTime = 5000 | スライドアニメーション待機時間 |
| sideNavi = ‘on’ | 左右NEXT／BACKの表示／非表示（非表示の場合は「off」等） |
| autoPlay = ‘on’ | 自動切換え動作のON／OFF（自動切換えさせない場合は「off」等） |
これらの設定値を変更することでもろもろ調整が可能になっています。
スクリプト全体はあまりシンプルと言える構成ではありませんが
少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。
画像サイズ（比率）によって各エリアの幅と高さを取得して制御していることもあり
使用する（切り替える）画像は全て幅と高さを同サイズのものを使用する必要があります。
サンプルではサムネイルを1行に6つ全て並べていますが
「thumbNum = 6」を「3」とすることで1行に3つ並べて2行にわたって表示する形になります。
「sideNavi = ‘on’」を「off」とすれば左右のボタンは表示されなくなります。
（記述は「off」でなくても「on」じゃなければ何でもいいです・・・）
１ページ内に複数設置する場合は自動スライド機能は一つ目のスライダーのみにしか動作しないので
必要なければ「autoPlay = ‘on’」を「off」としていただければと思います。
（こちらも記述は「off」でなくても「on」じゃなければ何でもいいです・・・）
左右のボタン非表示、サムネイル3個2行表示、自動切換え動作を止めたパターンのサンプルを別枠で表示
今回のサンプルではフリック動作は未実装です。（フリックスライドパターンは後日紹介予定）
iPhoneやAndroid端末でも動作するハズ。
レスポンシブ対応のサムネイル付きクロスフェードスライドショーを実装する際にぜひ。。。
はじめまして、いつも参考にさせていただいています。
今回、こちらのスライドショーを使わせていただこうと思っており、1点お聞きしたいのですが
サムネイルにaタグを貼りたいので、クロスフェード部分をクリックではなくマウスオーバーで切り替えたいと思っています。
こちら可能でしょうか？
お手数おかけいたしますがご教示いただけますと幸いです。
よろしくお願いいたします。
＞cnoさん
コメントありがとうございます。
このスライドショースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
サムネイルをマウスオーバーして切り替える場合は
記事内スクリプトの30行目の
————————————
thumbLi.click(function(){
————————————
を
————————————
thumbLi.hover(function(){
————————————
とすることで切り替えることが出来ると思いますが
元々、自動切り替えや左右のNEXT／BACKボタンは
サムネイルクリック動作で制御する仕様にしてあるので
マウスオーバーにした場合には
この2つはOFFの状態にする必要があります。
お試しください。
よろしくお願いします。
ご返信ありがとうございます。
hoverに変更し、無事動きました！
自動切り替えも出来れば実装したかったのですが、仕様がクリックを想定したものである以上
大きく変更が必要そうですね、、、
自分でも作成できるようになるよう勉強したいと思います。
ありがとうございました！
この上なく便利！すごい「jQuery」の小技まとめ３２ | コムテブログ | 2013.07.01 8:32
[...] jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 | BlackFlag [...]
いつも拝見しており勉強させていただいております。
マウスオーバーでメインの画像をクロスフェードで切り替えるのは、
.hoverで解決したかと思いますが、マウスが離れたとき
表示されてる画像から自動切り替えが再び始まるようにしたい場合は
どのようにすればよいでしょうか？
あつかましい質問をして大変恐縮ですが、
よろしくご教授くださいますようお願いいたします。
コピペでOK！楽天のページにjQueryで動くバナーを設置する方法 | ハカセの研究室 | 2013.07.04 21:06
[...] てみる ここを参考に作って見ます。 jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法｜BlackFlag [...]
＞neoさん
コメントありがとうございます。
このスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
上のコメントでもご説明させていただいておりますが
もともとクリック動作想定で構成しているので
マウスオーバーで実装する場合は
自動切り替えとNEXT／BACKボタンの
2つの動作を実装させるのは厳しいので
OFFにしていただく必要があります。
またマウスオーバー仕様での
スライドショーが作成できたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
いつも大変お世話になっております。
レスポンシブ対応のスライドショーを設置したく参考にさせていただいております。
今回、サムネイルも非表示にさせたいのですが、単純にhtml側のサムネイル部分を削除するだけで問題ないでしょうか？
jsファイルにサムネイルに関する記述もいろいろあるので、単純にHTML側のサムネイル部分を記載しない、というだけで大丈夫か不安になりまして。。。
お忙しいところ恐れ入りますが、ご回答いただけますと幸いです。
どうぞよろしくお願いいたします。
＞ともさん
コメントありがとうございます。
このレスポンシブスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
このスライドショーはサムネイルありきで構成してあるので
HTMLからサムネイル部分を削除してしますと動作しなくなってしまいます。
サムネイルを非表示にする場合には
HTMLで削除するのではなく
CSS側で「.slideShow .thumbNail」の部分を
————————————–
.slideShow .thumbNail {
width: 100%;
height: 0!important;
overflow: hidden;
}
————————————–
この様にすることで
サムネイル非表示の状態で
実装することができるかと思っております。
お試しください。
よろしくお願いします。
いつも参考にさせていただきありがとうございます。
http://black-flag.net/devel/jQueryResponsiveSlideShow/
コチラのページのサンプルについてですが、NEXTのボタンは透過になっているのですが、BACKのボタンは透過になっていないと思うのですが、コレはどうやって変えればいいのでしょうか？NEXTのボタンのようにBACKも透過にしたいのですが。。
＞ゆうさん
コメントありがとうございます。
このレスポンシブスライドショースクリプトの使用を
ご検討されている様で嬉しく思っております。
ご指摘いただいた件についてですが
スクリプトをちょくちょく改修していたどこかの段階で
この部分おかしくなってしまっていたようでした。
失礼致しました。
再度修正してスクリプトを更新してありますので
左右のボタンは透過状態になっていると思います。
ご確認ください。
よろしくお願いします。
確認しました、素早い対応ありがとうございます！
初めまして。
WEB初心者ですがこちらのスライダーを実装してサイトを作りました。デモサイトなので存在しないスクールです。
＜ ＨＴＴＰ：スラッシュスラッシュlilylovin.web.fc２.comスラッシュactindex.html＞
サムネイルの一番右の画像がどうしても切れてしまいます。６枚スライドしています。どのように切れないようにできますか？
後、メイン画像とサムネイルの間に隙間ができているのですが、猫ちゃん画像のデモのように隙間をなくしたいです。どのようにすればいいですか？
ちなみに、サイドのNAVIの矢印ですが、自分で作ったPNGの矢印に変えてみました。GOOGLEではうまく表示されたのに、IEでは表示されません。CSSも画像指定もしました。 IEでちゃんと表示されるためにはどうすればいいですか？
宜しくお願いいたします。
現在、ECサイトを作成中なのですが、商品画像のスライダーとして探していたものとジャストなスライダーに辿り着きました。
ありがとうございます。
そこで、設置をしてみたのですが、もう、バッチリです…。ええです。
ただ、サイト自体をレスポンシブにて構築していて、PC・タブレット→2カラム、スマホ1カラムとなっています。
PCとスマホに関しては問題ないのですが、タブレットに関して、「setMaxWidth = xxx,」の値で固定されてしまっている為、隣接するカラムにかぶってしまいます。
そこで、「setMaxWidth = xxx,」の値の部分を親要素に対してwidht100%にすることは可能でしょうか？
可能な事でしたら、教えて頂ければ幸いです。
よろしくお願い致します。
＞けいさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらくCSSのブラウザリセットがされていないのではないかと思われます。
全体のCSSブラウザリセットを実装していただくか
スライドショー用のCSSの先頭に
————————
.slideShow,
.slideShow * {
margin: 0;
padding: 0;
}
————————
を追記してみてください。
ボタンについては
こちらのIEでは正常に表示されているのですが
書き出し方法を変えてみたり、
PNGではなくJPEGにしたら表示されるか（ボタン要素はそこに存在しているか）
など確認してみてください。
よろしくお願いします。
＞ええねんさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実際の実装されている全体構成を確認してみないと何とも言えないのですが
「setMaxWidth」は固定幅設定という物ではなく最大幅を設定する値になっており
基本構造としてはスライダー全体は親要素の100％幅になっていると思います。
スライドショー全体を別のブロック要素で囲み
そちらで幅を制御してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
ご返信ありがとうございました！ 修正できました！ 感謝です（＾０＾）
また利用させていただきたいと思います！！
はじめまして、まったくの初心者です。
メイン画像を左端に寄せトップの余白もなくしたい場合、どこを変更すればよいのでしょうか？
ブラウザはIEで考えています。
カンタンな質問で恐縮ですがご教授いただけると幸いです。
＞wareさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいたスライドショーを左寄せにする件についてですが
CSSの設定変更になります。
「body」に指定してある「textg-align」を「left」に
「h1」に指定してある「margin-bottom」を「0」に
「.slideShow」に指定してある「margin」を「0」に
することで実現できるかと思います。
お試しください。
よろしくお願いします。
返信遅くなりました。
ご指摘の箇所で、できました。
ありがとうございます。
これからもよろしくお願いいたしますm(__)m
はじめまして。
このスライダーを使わせていただこうと思っています。
ですが、ローカル（DW）ではスライダーが動くのですが、サーバーにUPすると一番目の写真しか
表示されません。（URL添付）
どこがおかしいのでしょうか。
よろしくお願いします。
＞coroさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
こちらの環境では画像は表示されているようでした。
スライドショー部分以外で
メニュー箇所で回り込み解除がされておらず
レイアウトが崩れてしまっているようなので
その部分を改善できれば解消するかも、とも想定しております。
ご確認ください。
よろしくお願いします。
はじめまして。
jQueryを使ったスライドを作成中でして大変参考になります。
サムネイルをメイン画像の右側へ持って行くにはどうしたらよいでしょうか。
わからないことだらけで路頭に迷っています…。
お時間ありましたらお答えいただけると助かります。
よろしくお願いします。
＞しんやさん
コメントありがとうございます。
このレスポンシブクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
申し訳ありませんが当記事のスクリプト構成の場合
サムネイルのレイアウトは下のみになっております。
（サムネイルを右側に持っていくには全体構成を変更する必要があります。）
またその様なレイアウトのクロスフェードビューアーが出来ましたら
ここで紹介させていただきます。
よろしくお願いします。
スライドショー動作スクリプトは参考になりました。
ありがとうございます。
質問ですが，メイン画像をマウスオーバーさせると，画像にマスクがかかるようにするにはどのようにすればよろしいでしょうか？
よろしくお願いします。
＞金柑飴さん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実装されようとしている動作がどのようなものか判断できずにおりますが
単純なプラグイン等を使ったマウスオーバーの動作でしたら
当記事のスクリプトと併用することで
実装することも可能かと思っております。
お試しください。
よろしくお願いします。
はじめまして！
こちらを参考にHPにスライドバナーをとりいれさせて頂きました！
大変わかりやすくとても感謝しています！ありがとうございます！
１つ質問ですが、取り付けたバナーをHPにIframeにてとりつけたのですが、画像が左に寄ってしまい、iframeの設定をcenterに直しても直りませんでした・・・
htmlの記述のどの部分を変更でセンターに配置できるのかご教授願います！
どうぞよろしくお願いいたします。
＞artiさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実装されようとしている構成等が不明なので何とも言えないのですが
スクリプト自体は影響しない部分だと思いますので
CSSにてiframe自体のセンタリングとiframe内のセンタリングの指定を
正しく入れてみてください。
よろしくお願いします。
初めまして、何時も参考にさせて頂いていて非常に助かっております！初心者です。
質問ですが、サムネイルを3枚に変更すると左寄せになってしまいセンタリングの仕方がわかりません。どうしたらよいのでしょうか？
単純な質問で恐縮ですが、よろしくお願いします。
＞作花ユメさん
コメントありがとうございます。
このレスポンシブスライドショーをご活用いただいている様で
嬉しく思っております。
サムネイルの個数に関しては
スクリプトの11行目の「thumbNum = 6」の部分で指定するようになっておりますので
ここを「thumbNum = 3」としてみてください。
構成としてサムネイルはスライドショー全体の幅に対して
サムネイル数を割って割り当てていますので
中央寄せではなく幅めいっぱいになります。
お試しください。
よろしくお願いします。
毎度、拝見させていただいてます。
この度、とても気にいってスライダーを使わせていただいてます。
初心者です。
ライトＢＯＸ（リモート等ない物）とスライダーを併用して作成中ですが、スライダーを使用するとライトＢＯＸが機能しなくなります。併用は難しいでしょうか？
スクリプトの構築ですが、ＨＴＭＬ上ではなく、jsシートに写し、テキストとしてつなぐ事は可能でしょうか？
教えて下さい。
＞emaさん
コメントありがとうございます。
当記事のレスポンシブスライドショーをご活用いただいている様で
嬉しく思っております。
他のプラグインとの併用については
基本的には問題なく動作すると思います。
スクリプトを外部ファイル化することももちろん可能です。
実装してみてうまくいかない場合は
URLをお知らせいただければ
原因等を見つけることができるかもしれません。
よろしくお願いします。
初めまして。
スライドショーを使わせて頂いております。
そこで質問なのですが。
サンプルのサムネイルを2行に分けて表示するのを試しているのですがうまくいきません。
6枚の画像を
3枚ずつ2行に分けて表示しようとしています。
1行目はうまく表示されるのですが
2行目は1行目の最後（一番右）の下に1枚だけ表示され
なぜか3行目に残りの2枚が左から1枚目、2枚目のとこに表示されてしまいます。
なにか対策等あればご教示頂きたいです。
宜しくお願いします。
＞IMさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
サンプルファイルでもその様な現象になっているのでしょうか。
それとも実装されようとしているHTML内でその様な現象が起こっている場合は
テストURLなどお知らせいただければ調査も出来るかと思います。
よろしくお願いします。
サムネイルが2行に収まらない件ですが
色々試しているうちに解決しました(笑)
どうやら画像のサイズがバラバラだったのが原因のようです。
お騒がせしました。
ありがとうございます。
はじまして。web制作初心者です。
いつも参考にさせていただいております。
現在ECサイトを作成中なのですがサムネイル画像にもURLを貼るには
どうすればよいでしょうか。
お忙しいかとは思いますがご教示いただければ幸いです。
よろしくお願いいたします。
＞emiさん
コメントありがとうございます。
当記事のクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
サムネイル画像にURLを貼るには
HTML側でサムネイル画像に対してリンクタグを設置して頂ければ動作すると思いますが
スライドショー自体がサムネイル画像クリックで
メイン画像が切り替わる構成になっているので
その動作は実行されなく（見えなく）なってしまうかと思います…
ご確認ください。
よろしくお願いします。
いつも参考にさせて頂いております。初心者なのですがよろしくお願い致します。
Eサーブのカスタムテンプレートを使用してネットショップを運営しております。
TOPページにスライドショーを表示させたく、こちらのページを参考にしながら
HTML ｃｓｓをいれまして表示はしました。ですが、headタグの追記にscript type
のタグをいれると「smartyの文法にエラーがあります」とメッセージがでてしまいどうしていいのか
わからずに困っております。
なにかやり方などありましたらご教示頂けたら幸いです。
よろしくお願い致します。
＞emiさん
コメントありがとうございます。
このクロスフェードスライドショースクリプトをご活用いただいている様で
嬉しく思っております。
仰られているEサーブと言うものを触ったことが無いので何とも言えないのですが
HTMLタグの中にスクリプトを直接記述できないのならば
外部ファイル化して読み込むなど試してみてはいかがでしょうか。
もしくはEサーブの運営側にスクリプトの追加方法について
問い合わせていただいた方が早いかと思います。
ご確認ください。
よろしくお願いします。
いつも参考にさせて頂いております。
大変分かりやすいです。
質問ですが、
枚数が多い場合はサムネイル部分もカルーセルにしたいのですが、
どのようにすれば対応できますでしょうか。
恐縮ですが、よろしくお願いします。
＞BrownBest5さん
コメントありがとうございます。
このクロスフェードスライドショースクリプトを検討いただいている様で
嬉しく思っております。
申し訳ありませんが、当スクリプトでは
サムネイル部分のカルーセルについての実装は想定しておりません。
その様な仕様でのスクリプトが出来ましたら
またここで紹介させていただきます。
よろしくお願いします。
いつも勉強させていただいています。
私の方で実装したこちらのスライダーが、
あるPC(Windows)のIEだけスライド部分が表示されない現象が起きています。
そのPCのChromeでは表示されており、
表示の出来ないIEでもこのページのスライダーは上手く表示されています。
・サムネイルは表示される。
・IE11、ブラウザのJavaScriptはオンになっている。
・Chromeのデベロッパーツールで見てもエラーは出ていない。
思い当たる原因はありますでしょうか。
ご教授していただけますと助かります。
よろしくお願いいたします。
＞しんやさん
コメントありがとうございます。
ご質問いただいた件についてですが
サンプルファイルでもその様な現象が起こっているのでしょうか。
それとも実装されようとしているHTML内でその様な現象が起こっている場合は
テストURLなどお知らせいただければ調査も出来るかと思います。
よろしくお願いします。
はじめまして。
こちらのスライドショウ探していたシンプルなスライドショウで
大変気に入っているのですが、スマ-トフォンサイトで見たときにだけ、
メイン画像が表示されたりされなかったりします。
HTML、CSS、JavaScriptsともにそのままのコードを使用しています。
情報不足かもしれませんが、ご教授いただけるのであれば、
よろしくお願いいたします。
すいません。
上の質問のものです。
使用方法はタブで切り替える要素の中にスライドショウを設置しています。
よって、同一ページ内に5つ設置しています。
これが原因かもしれませんが、PC用サイトは問題なく表示されています。
スマートフォン用サイトのみ、一番最初のタブの要素のみ表示されて
他の4つは表示されたりされなかったりします。
よろしくお願いいたします。
とても間単に設置できる上に、レスポンシブ対応でステキすぎです。
ありがとうございます。
質問なのですが、ヘッダーすぐ下のメインビジュアルに使っています。
ページをすべて読み込んでから表示がなされるので（？）
１）ヘッダー
２）メインビジュアルの「次」の要素
３）下に押し下げるようにして、メインビジュアル
の順に表示されます。
シングルページ構成なので、縦に長いコンテンツということもあると思いますが
メインビジュアルの表示の遅さが気になります。
メインビジュアルを先に表示させたいのですが
どのようにしたらよいでしょうか？
.slideShow .mainView の背景画像として
メインビジュアルを設定し、メインビジュアルの一部を
透過pngでスライドショーとして上に重ねています。
ご教示いただけますと幸いです。
＞mellonさん
コメントありがとうございます。
クロスフェードスライドショーをご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実際にどのようなタブ構成で実装されているのかが
わからないとなんとも言えないのですが
タブをクリックするごとにスクリプトが実行させるように
調整してみてはいかがでしょうか。
憶測での回答になってしまいますが
お試しください。
よろしくお願いします。
＞もじこさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
Google Chrome等のブラウザでは
画像等の高さはページをすべて読み込んだ後に取得しないと
正常に値を取れないこともあるので当スライドショーは
ページの要素をすべて読み込んだ後に実行するようにしてあります。
表示面で気になる場合は、
ページ内のスライドショー以外の要素も
ページの要素をすべて読み込んだ後に表示するように設定していただければ
スライドショーと同時に画面上に表示されるようになるかと思います。
お試しください。
よろしくお願いします。
はじめまして。
ECサイトでのスライドショー設置をいろいろ試みていたのですがなかなか上手くいかずこちらにたどり着きました。
設置すると初めてほぼ正常に動作したので感激です。
ただサムネイルの左側部分に余白ができてしまうのですが、これはどのようにしたら左にピタリと寄せることができるのでしょうか？
お忙しい中、ご回答いただけると非常に助かります。
よろしくお願いいたします。
ご返信ありがとうございます。
タブをクリックするごとにスクリプトが実行させるように
調整してみます！
ありがとうございました。
＞kazuさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらくCSSのブラウザリセットがされていないのではないかと思われます。
全体のCSSブラウザリセットを実装していただくか
スライドショー用のCSSの先頭に
———————————
.slideShow,
.slideShow * {
margin: 0;
padding: 0;
}
———————————
を追記してみてください。
お試しください。
よろしくお願いします。
お忙しい中ご回答いただきありがとうございます。
お教えいただいた記述をスライドショーのCSSに追記して試してみたのですがやはり余白は出たままです。
通常のHTML記述ではきれいに左側が揃うのですが、ECサイトにアップロードするとズレてしまうので
ECサイトのSCC（トップページ）をいじらないと解決しないのかな～と思っております。
ありがとうございました。
＞kazuさん
別のCSSでスタイルが上書きされているようでしたら
—————————
.slideShow,
.slideShow * {
margin: 0!important;
padding: 0!important;
}
—————————
といった形で「!important」をつけることで
解消できるのではないかと思われます。
お試しください。
よろしくお願いします。
BlackFlag様
お世話になります。
再度別の方法をご提案いただき感謝しております。
その後、htmlのページではスライドショーが正常に表示され作動することからやはりECサイトのCSSに問題があると思い試行錯誤しながらCSSの修正を試みました。ECサイトのサーバーにスライドショーをアップロードしたところ無事修正できたようで正常に表示され作動しております。
いろいろとお手数かけてしまい申し訳ございませんでした。
ご提示いただいた方法も今後の問題に使用させていただこうと思います。
本当に本当にありがとうございます。
また素晴らしいスライドショーを使わせていただき感謝です。
ありがとうございました。
今後ともよろしくお願いいたします。
初めまして。
ショップサーブで動くスライドショーを探していてこちらにたどり着きました。
初心者で申し訳ありませんが、よろしくお願いします。
当方、ショップサーブのテンプレートを使っており、商品ページにスライドショーを置きたいのですが、head要素が編集不可能でSCRIPTタグをどこに配置すればよいかわからず困っております。
HTMLを記載した直ぐ下にSCRIPTを記載してみましたが動きません。
初歩的な質問ですが、よろしくお願い致します。
すみません！
出来ました！
あとはちょっと大きさを修正しなければならない程度です！
また、わからなくなったら質問させていただきます！
ありがとうございました！
＞ゆこさん
コメントありがとうございます。
当記事のクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
問題となっていた部分も解消されたようで安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
お世話になります。
メイン画像にこちらのサムネイル付きのクロスフェードスライドショーを使わせていただこうと思っています。
サイトを開いたときに１番はじめに表示されるメイン画像はサムネイルなしで、２枚目のものからサムネイル画像が１枚目の下に表示されているような構造にしたいのですが、どれだけ調べてもわかりません。
http://www.yoshinoya-holdings.com/index.html
意味としては上記のような感じのイメージです。
このような感じにするのにはどうのようにしたらよろしいでしょうか。
お忙しいところ申し訳ございませんが教えていただけると幸いです。
よろしくお願いいたします。
＞miccoさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
ページロード時に表紙となる画像をスライドショーの前面に配置して
サムネイルがクリックされた時点で非表示することで可能かと思います。
表紙となる画像に任意のIDなどをつけて
「position:absolute」で絶対位置にして、
スライドする各要素は「z-index」を「99」で設定してありますので
表紙となる画像には「z-index」を「100」以上の値を設定し最前面に配置し、
サンプルスクリプトの32行目あたり（サムネイルのクリック処理内）で
画像に付けたIDを「display:none」にすることで実装できるかと思います。
お試しください。
よろしくお願いします。
ご返信いただきありがとうございます。
さっそくやってみました。ですがうまくいかず・・・
知識不足で申し訳ありません。
サンプルスクリプトに
$(“#ID名”).css(“display”,”none”);
の一文を入れてみました。
CSS（layout.cssという名の中に書きました）内には
#ID名 {
position:absolute;
z-index:101;
}
としました。
一番トップにくるliにidをつけました。
上記のようにしましたが、確認するとサムネイル１枚目をクリックすると何もメインに表示されず、
２枚目をクリックすると、１枚目で表示してほしい画像が表示されてしまいます。
ひとつずつずれてしまっている感じです。
お忙しい中申し訳有りませんが、間違っているところなどご指摘いただけたら嬉しいです。
よろしくお願いいたします。
＞miccoさん
ご確認ありがとうございます。
実装について説明不足でした…
表紙とする画像は＜li＞で構成するのではなくて、
＜img＞単体として配置してください。
（＜ul＞からも外して構成してください。）
＜img＞にIDを付けて制御し、
リスト＜ul＞全体の前面に＜img＞が被さるイメージになります。
お試しください。
よろしくお願いします。