jQueryを使ってのコンテンツスライダーや画像スライドショーなどを
出来るだけシンプルなスクリプトでに実装する実験やサンプルをいくつか紹介してきていますが
最近よく見かける（流行り？）ブラウザウィンドウ画面の幅をめいっぱい使って
コンテンツ要素をスライドさせて魅せるコンテンツスライダーを
まだ試したことがなかったので実験的に作ってみたのものを紹介してみます。
【2014/01/15】 フリック動作の追加及び、スライダー全体がレスポンシブ対応のタイプの改訂版スクリプトについてはこちらの記事から
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
今回のスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。。。
「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示
スライダー中心にメイン表示エリアを設置して
その前後の画像は左右に透過させたような形で
スライド要素をブラウザ枠めいっぱいに並べて配置しています。
（ウィンドウサイズを変更した際にも枠に合わせて左右の透過エリアが広がります）
左右の透過エリアはスライダーのNEXT／BACKボタンとなっているので
クリックすることで一つずつスライダーを移動させることができます。
NEXT／BACKボタンに加えて
表示するコンテンツ要素分のページネーションが付加するようにしてあるので
ページネーションの各ボタンをクリックさせることで
任意のスライド番号へ移動させることも可能です。
動作仕様については以上になります。
全体構成についてまずはHTMLから。
◆HTML <div class="wideslider"> <ul> <li><a href="#1"><img src="img/photo01.jpg" width="800" height="500" alt="" /></a></li> <li><a href="#2"><img src="img/photo02.jpg" width="800" height="500" alt="" /></a></li> <li><a href="#3"><img src="img/photo03.jpg" width="800" height="500" alt="" /></a></li> <li><a href="#4"><img src="img/photo04.jpg" width="800" height="500" alt="" /></a></li> <li><a href="#5"><img src="img/photo05.jpg" width="800" height="500" alt="" /></a></li> </ul> </div><!--/.wideslider-->
クラスやIDを付けた任意のブロック要素の中に
＜ul＞リストを使ってコンテンツ要素（サンプル画面で言うメイン画像）を並べます。
サンプルではコンテンツ要素を5つにしていますが
これを増減させるには単純に＜li＞の数を増減するだけです。
ページネーションや左右のNEXT／BACKボタンは
スクリプト側から生成するようにしているので
HTMLには記述しません。
そしてCSSは以下の様になります。
◆CSS
.wideslider {
width: 100%;
height: 500px;
text-align: left;
position: relative;
overflow: hidden;
}
.wideslider ul,
.wideslider ul li {
float: left;
display: inline;
overflow: hidden;
}
.wideslider_base {
top: 0;
position: absolute;
}
.wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden;
}
.slider_prev,
.slider_next {
top: 0;
overflow: hidden;
position: absolute;
z-index: 100;
cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
.pagination {
bottom: 10px;
left: 0;
width: 100%;
height: 15px;
text-align: center;
position: absolute;
z-index: 200;
}
.pagination a {
margin: 0 5px;
width: 15px;
height: 15px;
display: inline-block;
overflow: hidden;
background: #333;
}
.pagination a.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
.wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.wideslider ul {
display: inline-block;
overflow: hidden;
}
スライド左右の透過NEXT／BACKボタン部分の色・見た目や
ページネーションの色味などはCSSで指定します。
スライド要素の幅や高さについては
スクリプト側で制御するので、ここでは記述していません。
そして実際の動作スクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $setElm = $('.wideslider'),
baseWidth = 800,
baseHeight = 500,
slideSpeed = 500,
delayTime = 5000,
easing = 'linear',
autoPlay = '1', // notAutoPlay = '0'
btnOpacity = 0.5,
pnOpacity = 0.5;
$setElm.each(function(){
var targetObj = $(this);
var widesliderWidth = baseWidth;
var widesliderHeight = baseHeight;
var wsSetTimer;
targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');
var findBase = targetObj.find('.wideslider_base');
var findWrap = targetObj.find('.wideslider_wrap');
var findPrev = targetObj.find('.slider_prev');
var findNext = targetObj.find('.slider_next');
var baseListWidth = baseWidth;
var baseListCount = findWrap.children('ul').children('li').length;
var baseWrapWidth = (baseListWidth)*(baseListCount);
var pagination = $('<div class="pagination"></div>');
targetObj.append(pagination);
var baseList = findWrap.children('ul').children('li');
baseList.each(function(i){
$(this).css({width:(baseWidth),height:(baseHeight)});
pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
});
var pnPoint = pagination.children('a');
var pnFirst = pagination.children('a:first');
var pnLast = pagination.children('a:last');
var pnCount = pagination.children('a').length;
pnPoint.css({opacity:(pnOpacity)}).hover(function(){
$(this).stop().animate({opacity:'1'},300);
}, function(){
$(this).stop().animate({opacity:(pnOpacity)},300);
});
pnFirst.addClass('active');
pnPoint.click(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var setNum = pnPoint.index(this);
var moveLeft = ((baseListWidth)*(setNum))+baseWrapWidth;
findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
pnPoint.removeClass('active');
$(this).addClass('active');
if(autoPlay == '1'){wsTimer();}
});
var makeClone = findWrap.children('ul');
makeClone.clone().prependTo(findWrap);
makeClone.clone().appendTo(findWrap);
var allListWidth = findWrap.children('ul').children('li').width();
var allListCount = findWrap.children('ul').children('li').length;
var allLWrapWidth = (allListWidth)*(allListCount);
var windowWidth = $(window).width();
var posAdjust = ((windowWidth)-(baseWidth))/2;
findBase.css({left:(posAdjust),width:(baseWidth),height:(baseHeight)});
findPrev.css({left:-(baseWrapWidth),width:(baseWrapWidth),height:(baseHeight),opacity:(btnOpacity)});
findNext.css({right:-(baseWrapWidth),width:(baseWrapWidth),height:(baseHeight),opacity:(btnOpacity)});
$(window).bind('resize',function(){
var windowWidth = $(window).width();
var posAdjust = ((windowWidth)-(baseWidth))/2;
findBase.css({left:(posAdjust)});
findPrev.css({left:-(posAdjust),width:(posAdjust)});
findNext.css({right:-(posAdjust),width:(posAdjust)});
}).resize();
findWrap.css({left:-(baseWrapWidth),width:(allLWrapWidth),height:(baseHeight)});
findWrap.children('ul').css({width:(baseWrapWidth),height:(baseHeight)});
var posResetNext = -(baseWrapWidth)*2;
var posResetPrev = -(baseWrapWidth)+(baseWidth);
if(autoPlay == '1'){wsTimer();}
function wsTimer(){
wsSetTimer = setInterval(function(){
findNext.click();
},delayTime);
}
findNext.click(function(){
findWrap.not(':animated').each(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var posLeft = parseInt($(findWrap).css('left'));
var moveLeft = ((posLeft)-(baseWidth));
findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
var adjustLeft = parseInt($(findWrap).css('left'));
if(adjustLeft == posResetNext){
findWrap.css({left: -(baseWrapWidth)});
}
});
var pnPointActive = pagination.children('a.active');
pnPointActive.each(function(){
var pnIndex = pnPoint.index(this);
var listCount = pnIndex+1;
if(pnCount == listCount){
pnPointActive.removeClass('active');
pnFirst.addClass('active');
} else {
pnPointActive.removeClass('active').next().addClass('active');
}
});
if(autoPlay == '1'){wsTimer();}
});
}).hover(function(){
$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
}, function(){
$(this).stop().animate({opacity:(btnOpacity)},100);
});
findPrev.click(function(){
findWrap.not(':animated').each(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var posLeft = parseInt($(findWrap).css('left'));
var moveLeft = ((posLeft)+(baseWidth));
findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
var adjustLeft = parseInt($(findWrap).css('left'));
var adjustLeftPrev = (posResetNext)+(baseWidth);
if(adjustLeft == posResetPrev){
findWrap.css({left: (adjustLeftPrev)});
}
});
var pnPointActive = pagination.children('a.active');
pnPointActive.each(function(){
var pnIndex = pnPoint.index(this);
var listCount = pnIndex+1;
if(1 == listCount){
pnPointActive.removeClass('active');
pnLast.addClass('active');
} else {
pnPointActive.removeClass('active').prev().addClass('active');
}
});
if(autoPlay == '1'){wsTimer();}
});
}).hover(function(){
$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
}, function(){
$(this).stop().animate({opacity:(btnOpacity)},100);
});
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| $setElm = $(‘.wideslider’) | 対象にするブロック要素名（IDでも可） |
|---|---|
| baseWidth = 800 | スライドさせるコンテンツ要素の幅 |
| baseHeight = 500 | スライドさせるコンテンツ要素の高さ |
| slideSpeed = 500 | スライドアニメーションスピード |
| delayTime = 5000 | スライドアニメーション待機時間 |
| easing = ‘linear’ | スライドアニメーションイージング |
| autoPlay = ’1′ | 自動スライドON／OFF（ON = 1 , OFF = 0） |
| btnOpacity = 0.5 | 左右のNEXT／BACKエリアの透過具合 |
| pnOpacity = 0.5 | ページネーションの透過具合 |
これらの設定値を変更することでもろもろ調整が可能になっています。
スクリプト全体はあまりシンプルと言える構成ではありませんが
少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。
設置の際の簡単な注意点としては
HTML構成上、このコンテンツスライダー要素全体を囲うブロック要素があった場合は、
その要素の幅は100%になっている必要があります。
併せて、この形状のコンテンツスライダーを
１ページ内に複数設置することはあまりないかと思いますが
複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。
※2016/01/09 改定
カスタマイズに関しては
jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり
CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。
ページネーションについては、
生成される際に個別に「.pn(n)」のクラスが付与されるようになっているので
CSS側からそれらのクラスに対して背景画像を指定することで
サムネイル画像として表示させることも可能です。
※スライド要素が5つの場合はページネーションのクラスは「.pn1」 ～ 「.pn5」という風に個別に付与されます。
jQueryイージングプラグインを使ってスライドアニメーションにイージング処理をつけて、
ページネーションをスライドエリアの外にしてサムネイル表示にした場合は
以下の様な見た目にすることができます。
jQueryイージング＋ページネーションをエリア外＋サムネイル表示にしたパターンのサンプルを別枠で表示
ブラウザの幅をめいっぱい使ってスライダーを設置することで
ダイナミックな演出を組み込むことが可能かと思っています。
ブラウザウィンドウ幅めいっぱいのコンテンツスライダーを実装する際にぜひ。。。
サンプルファイルをダウンロードしたい方はこちらから
【2014/01/15】 フリック動作の追加及び、スライダー全体がレスポンシブ対応のタイプの改訂版スクリプトについてはこちらの記事から
いつも色々参考になっております！
すみません、サムネイルにもリンクを貼りたくサムネイルを自動生成ではなくしたいのですがその場合はどのように指定すれば良いのでしょうか・・・。
mouseoverでメインビジュアルあるが切り替わり、サムネイルとメインビジュアルにリンク先URLを記載したい次第です。
ご教示頂けたらうれしい次第です！
＞あずきさん
コメントありがとうございます。
質問いただきました仕様についてですが
その様な動きにすることも可能だと思いますが
当記事のスクリプトからだいぶ変更する必要があります…
その様な動作仕様のスライダーを作った際には
またここで紹介させていただきます。
よろしくお願いします。
はじめまして。検索でたどり着きました。
wordpressで初めてサイトを作りかけている者です。
こちらまさに探していた理想のスライダーでぜひ取り入れたいと思いやってみました。
が、スライドがループせず、1周すると画像が出なくなってしまいました。
最初に表示された時も左の画像が出てませんでした。
wordpressで管理しているページに入れるときの注意などありましたら教えていただけないでしょうか？
＞638さん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
WordPressで構築する際にも特に変更させる部分はないかと思っております。
始めから直接WordPressに組み込むのではなく
静的なHTMLファイルの状態で動作させたものをWordPressに実装させる、
という流れでの方法をお試しいただいてみてはいかがでしょうか。
よろしくお願いします。
矢次さん、早速のお返事ありがとうございました。
ご指摘の通り静的状態で動作させてからというのをやってみたところ、問題なくループして表示されるようになりました！
てっきりWordpressが原因かと思ったのですがどうもスライド画像のwidthを大きくするとそうなるようでした。
とりあえず解決できて本当に助かりました。ありがとうございます。
できればもう一つ教えていただきたいのですが
3つある真ん中のメインの画像エリアの上に常に同じテキストを表示させたいのですが、
wideslider_baseに指定してみたのですが出てきませんでどこに指定すればできますでしょうか？
お時間あるときでもご教示いただけたら幸いです。
どうぞよろしくお願いいたします。
＞638さん
ご返信ありがとうございます。
無事に解決したようで安心しました。
エリアの上にテキストを表示させるのは
任意のdivなど、何か要素を追加して、
その追加した要素に対してCSSで
「.pagination」のクラス指定の値をコピペして
位置調整だけすれば実現できるのではないかと思っております。
お試しください。
よろしくお願いします。
Jqueryを使う際によく参考にさせて頂いております。
素人ですが現在作成中のサイトで実際に使わせて頂いた物もあり大変助けられております。
今回も参考サイトにあるようにちゃんと動かす事は出来たのですが。
しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。
参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか？
こんにちは。
いつも参考にさせて貰っております。
昨日も質問させていただきましたが、伝わりにくかったかと思い簡潔に質問させていただきます。
「今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけない」となっています。
コンテンツスライダーを幅1000px（コンテンツスライダー要素全体を囲うブロック要素）のコンテナー内の
中央に幅950pxで表示させることは可能でしょうか？
どこを変更すれば、いいのか教えて下さい。
＞tkm0604さん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
おそらく、スクリプト自体はそのままで
サンプルファイルで言う「.wideslider」のブロック要素の周りを
別のブロック要素で囲い、その要素の幅を950pxにすれば
理想とされている形での実装が可能になるのではないでしょうか。
950pxの幅指定がされているブロック要素の中に
当記事のコンテンツスライダースクリプトの要素が
幅100%で入る構成になります。
お試しください。
よろしくお願いします。
【javascriptパターン】よく使うメソッド、パターン【jQuery】 | ブログ | ColorFullWeb | 2013.04.06 8:08
[...] [...]
はじめまして。検索でたどり着きました。
こちらのjQueryを是非使用させていただきたいのですが、
ライセンス形態はどのようになっていますでしょうか？
商用サイトで利用をしたいと思ってます。
また使用させていただく場合、著作権表示などの必要はございますでしょうか？？
よろしくお願いいたします。
＞motoさん
コメントありがとうございます。
このコンテンツスライダースクリプトをご活用いただいているようで
とても嬉しく思っております。
こちらのスクリプトの使用に関しては
個人・商用問わず、ご自由に使用していただいてかまいません。
権利表記もリンクも特に必要ありません。
（リンクを張っていただけると嬉しく思いますが、全く強制ではありません）
この記事に関わらず、当ブログで紹介しているスクリプトは
特にライセンスなども設けていないので、
ご自由に使用および改変して
サイトに組み込んでいただいて問題ありませんので
ご活用いただけると幸いです。
よろしくお願いします。
初めまして。
いつも参考にさせて頂いております。
今回こちらのwidesliderを利用させて頂きました。
ありがとうございます。
とても素晴らしいスクリプトだと思います。
WPの固定ページに導入してみたところ、
FFとIEでは表示になんら問題はありませんでしたが、
Chromeだけなぜか画像が表示されない現象が出て困っております。
デベロッパーツールにて調べてみたところ、画像自体は認識されているようです。
このような拙い表現では分かりづらいかと思われますが、
何かアドバイス等ありましたらご教授願えませんでしょうか？
＞1o4さん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
こちらではその様な事象はまだ未確認なのですが
スクリプトの実行タイミングの調整で
表示される可能性もあるのではないかと思っております。
———————————————–
$(function(){
$(window).load(function(){
～ ここにスクリプトを記述 ～
});
});
———————————————–
この様にスクリプト全体を囲い
ウィンドウ読み込み後に実行させる構成にしてみてはいかがでしょうか。
お試しください。
よろしくお願いします。
こんにちは、自分の理想のコンテンツスライダーに出会えて光栄です。
ありがとうございます。
1つ質問なのですが、真ん中の画像にリンクを貼ることはできないでしょうか？
よろしくお願い致します。
＞cyikoさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただいた件についてですが
サンプルファイル内でのHTMLでも画像にはリンクを張っておりますが
動作していないということでしょうか。
サンプルファイルではリンク先hrefを「#」にしておりますが
その部分をURLや相対パスなどに書き換えてみていただければと思います。
お試しください。
よろしくお願いします。
返答ありがとうございます。
＜li＞＜a href=”#1″＞＜img src=”img/photo01.jpg” width=”800″ height=”500″ alt=”" /＞＜/a＞＜/li＞
上記の＃1の部分をリンクさせたいページのURLに置き換えると、真ん中から右の画像がすべて薄くなり、NEXTボタンも消えてしまって…
何度やってもダメです。
初心者ですみません(>_<)
ご指導いただければ幸いです。よろしくお願い致します。
何度もすみません、
リンクを変えると、真ん中が右にずれてしまうようです。
私だけでしょうか(＞＜)
＞cyikoさん
おそらくHTMLに記述する際に
何か誤ってタグなどを削除してしまっているのではないかと思われます。
参考までにリンク先を「#」ではなく
YahooやGoogleなどのサイトに変更したファイルも用意しましたので
必要であれば下記よりダウンロードして確認してみてください。
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderLink.zip
※正常に動作することを確認済みです。
よろしくお願いします。
＞この様にスクリプト全体を囲い
＞ウィンドウ読み込み後に実行させる構成にしてみてはいかがでしょうか。
ご連絡遅くなりましたが、無事表示させることができました。
このような基本的な事もわからずお恥ずかしい限りです。
本当にありがとうございました。
はじめまして。
今度、仕事で美容関係の新商品を出すことになり、予算の関係上、初心者にも関わらずWEBページを作成しております。なんとかデザイン性の高いHPにしようとしていたらこちらにたどり着き、大変感謝しております。
１点作業をしていてどうしても解決できない箇所があり、ご教示いただければ幸いです。
ヘッダーをスクロールしても固定表示させるデザインで制作を進めているのですが、どうしてもこのスライダーの部分だけがヘッダーよりも前面に表示されてしまいます。
ヘッダーなのか、それともスライダーのどこかなのか、何を書き換えれば良いのか、皆目見当もつきません。
お手すきの時で結構ですのでご指導頂ければ幸いです。
宜しくお願い申し上げます。
＞きんさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただきました件についてですが
ご使用しているヘッダー固定のスクリプトが
どの様な構成になっているか不明なため何とも言えないのですが
おそらくCSSでの「z-index」の指定の問題かと思われます。
ヘッダー固定のスクリプト内でCSSの「z-index」指定がありましたら
値を「300」などと大きな値にしてみてはいかがでしょうか？
もしくはCSSに「z-index」の指定がなければ
「z-index:300」の様な形で追記してみていただければと思います。
お試しください。
よろしくお願いします。
ありがとうございます！
「z-index」を使うところまでは自力で調べがついたのですが、値を２とか３にしていたため、スライダーの真ん中の画像に対しては前面に出るものの、左右の透過している画像に対しては効かないという症状に陥っていました。
アドバイス頂いたように値を300にしたところ、きれいに固定ヘッダーが前面になりました！
ありがとうございました！！
初めまして。いつも参考にさせていただいております。
私の探し求めていたスライドなのですが、1点機能的に設定が行えないかご教授いただければ幸いです。
自動スライドONの設定で、カーソルを画像に重ねた時（全画像＋左右ボタン画像も含む）にスライドが自動停止、そしてカーソルを画像からはずした時（delayTime値後）に自動スライド開始、という機能の設定が行えないでしょうか。
どうぞ宜しくお願いいたします。
＞むらさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが、
もともとそういった想定にはしていなかったので
カスタムするには少々スクリプトを改修する必要があります。
コンテンツスライダーエリアにマウスオーバーした際の制御と
左右ボタンとサムネイル用ボタンをクリックした際の制御を変更し
自動スライドアニメーションを止めるパターンを用意してみましたので
必要であれば下記URLよりダウンロードして見比べてみてください。
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderHoverStop.zip
お試しください。
よろしくお願いします。
はじめまして。
フリーランスのwebデザイナーです。
jQueryに関することは、いつもこちらのサイトを拝見させていただいております。
この度、こちらのスライダーを制作中のサイトに導入させていただきたいと考えております。
そこで一つご教授願いたいです。
記事中に「左右の透過エリアはスライダーのNEXT／BACKボタンとなっている」とありますが、「NEXT／BACKボタン」だけを独立させることは可能でしょうか？
具体的には、「NEXT／BACKボタン（＜・＞のボタンのみ）」を透過エリア以外に移動させてクリックできるようにしたい、ということになります。
GW中であることは百も承知ですので、GW明けなど時間があるときにご回答いただければ十分です。
どうぞよろしくお願い致します。
ご回答ならびに新パターンの作成ありがとうございます。
想像していた通りの動作を確認させていただきました。
また、大変恐縮ではございますが組み立てていく中で、もう1点機能的に気づきがあり、
新しくご準備いただきましたパターンに追加が行えないかご教授いただければ幸いです。
ページナビゲーションと同様に、メインスライド（ネコ画像）もアクティブ要素の追加は行えないでしょうか。
【補足：要素追加後の適用スタイル（予定）】
・メインスライド：opacity:1;
・メインスライド以外：opacity:0.5;
・メインスライドhover時：opacity:0.2;
また、現在左右ボタンは画面幅に合わせてクリックできるエリアも自動伸縮にいたしますが、サイズ・位置固定（メイン画像の左右に配置）での調整を行う予定です。
よろしくお願いいたします。
＞かみやさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
あれこれ考えてみましたが
現状の構成ではNEXT／BACKのボタンをエリア外に移動させるのは
CSS及びスクリプト構成部分から変更し直すこととなるので
簡単なカスタマイズだけでは実現が厳しいかと思っております・・・
またその様な仕様の動作ができましたら
ここで紹介させていただきます。
よろしくお願いします。
＞むらさん
ご確認ありがとうございました。
無事に理想の動作が実現できたようで安心致しました。
再度ご質問いただきました件についてですが
現状ではメインエリアのアクティブ状態の判別は入れていないのですが
その様な動作を入れておくと便利に使えそうですね。
またその様な仕様が追加することができましたら
ここで紹介させていただきます。
よろしくお願いします。
はじめまして。
度々、Black Flagさんを参考にさせていただいております。大変たすかっています。
本当にありがとうございます。
おいそがしいと存じ上げますが、ひとつ質問をさせていただいてもよろしいでしょうか。
“btnOpacity”の数値を変更して、左右の透過NEXT/BACKボタンの透過率を変更したのですが、
（左右の画像があまりみえないようにしました）
マウスを重ねると、透過率が元にもどります。
（マウスをはなしても、変更後の透過率にもどらず、そのまま初期値の状態です）
なにか改善策はございますか？
＞yngさん
コメントありがとうございます。
いろいろと当ブログをご活用いただいているようで
嬉しく思っております。
ご質問いただきました「btnOpacity」の件についてですが
大変失礼致しました。。。
スクリプトを確認したところ
左右のボタンのマウスアウト後の透過の値を「btnOpacity」を使うところが
ページネーション用の「pnOpacity」の値が入ってしまっている凡ミスでした・・・
記事内の記述は修正済みですが
既に他でご実装されているかと思いますので
記事内のスクリプトの122、124、153、155行目にあたる
opacityの値に記述されている「pnOpacity」を「btnOpacity」に変更してみてください。
サンプルファイル等も修正済みとなっておりますので
照らし合わせながらご確認いただければと思います。
お手数お掛けしますが
ご確認よろしくお願いします。
いつも参考にさせてもらっています。
以前、tkm0604さんがご質問された「コンテンツスライダーを指定した幅内の中央に表示させることは可能か？」の回答を参考に「.wideslider」の外にブロック要素を設定したのですが、どうしてもメイン画像が右にずれてしまいます。
メインスライダーの開始位置を決められた幅内の中央に指定することはできないでしょうか？
つたない質問ですみませんが、よろしくお願いします。
さきほどの質問の追記です。
Chromのデベロッパーツールで確認したところ、
「.wideslider_base」にstyleを重ねて表示しており、どうやらここの「left」が位置をずらしている原因らしいのですが、
これは.jsファイルのどこを修正すればいいのでしょうか。
重ねてすみませんが、よろしくお願いします。
＞ながさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました
固定幅のエリアに配置する件についてですが
左右の余白部分の幅の値の取り方を変更する必要がありましたね。
当記事のサンプルスクリプトの構成で
幅を固定（1000px）したパターンを用意しましたので
下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderFixWidth.zip
スクリプト開始すぐに新たに
————————————-
wrapContents = $(‘#container’)
————————————-
を追加してあるので
固定幅となるブロック要素の
IDもしくはクラスを記述してください。
お試しください。
よろしくお願いします。
いつもBlackFlag様のサイトを拝見し、大変参考にさせていただいております。
今回もスライダー系のフルウインドウを拝見し、活用させていただいておりますが、
1つだけご教示頂きたい事がございましたので、投稿させてくださいませ。
スライダーするオブジェクトの「タグ」ですが、
この順番をランダムもしくは、スタート順を変更する事は可能でしょうか？
現状ではリストタグ（）の先頭がセンターに表示されスライドが始まりますが、
私が希望する内容は、そのスタート順を何処かで設定でき、
ページを読み込む度にスタート位置が変更されスライドが始まる（スタート画像のランダム可）。
この様な事が可能かご教示いただけましたら幸いです。
読み込む度にセンターに表示されます画像が同じなので、
BlackFlag様のスライダースクリプトと
私の作成したPHPにてリストタグ（先頭が異なるHTMLファイル）を
jQueryにて指定タグに挿入し
スタートするイメージをチェンジしているのが現状です。
もし、スライダースクリプトのみで可能であれば非常に助かります。
よろしくお願いいたします。
＞umiiro.surfさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
スタート位置を変更となると制御が複雑になりそうですが
ランダムに順番を入れ替えるには当ブログ別記事の
————————————————————
・jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
http://black-flag.net/jquery/20130327-4522.html
————————————————————
こちらで紹介しているリストをランダムに入れ替える方法と
組み合わせることで実現可能になるのではないかと思っております。
実装方法に関しましては参考までに
————————————————————
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderListRandom/
————————————————————
こちらにサンプルを用意しました。
ブラウザを何度かリロードしていただくと
リストの順番がすべてランダムに入れ替わるのを
ご確認いただけるかと思います。
データについては
————————————————————
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderListRandom.zip
————————————————————
にアップしましたので必要あればダウンロードしてみてください。
ご確認ください。
よろしくお願いします。
BlackFlag様
突然の投稿にご教示いただきありがとうございました。
また、サンプルまで作成いただき感謝しております。
やはりスタート順を入れ替えてとなると制御が難しいみたいですね。
PHPでもトライしてみたのですが、順番を決めうちしないとダメなので、
そうなりますと画像が少なければその決めうちした総数リストは少なくすむのですが、
画像が多くなると…。折角のPHPがアナログ的になってしまってます…。
作成いただきましたサンプルにて、私の方でもトライしてみます。
ただ、私1人ではここまでたどり着けなかったと思います。
今後ともBlackFlag様のサイトを拝見し、頑張っていきたいと思います。
誠にありがとうございました。
こんばんは。とても素敵なスライダーで私の探していたものがはこれでした。
是非使いたいと思い実装してみましたが、画像の幅が1400pxなのですが
IE（7,8）ですと左右の透過部分が真白になり表示されないようです。
色々検証してみましたが、1100pxを超えるとそのような現象になります。
どうすればいいかご教授いただけますでしょうか？
どうぞよろしくおねがいします！
＞モモさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらくご確認いただいているIE7,8というのは
「IE TESTER」で検証されているのではないでしょうか。
「IE TESTER」では1100px以上（画面のズーム倍率をかえたり）で
レンダリング自体が見切れるみたいなのでそういった事が起きるかもしれませんが
「IE TESTER」ではなくて通常のIE7,8ブラウザで
ご確認いただければ大丈夫なのではないかと思っております。
ご確認ください。
よろしくお願いします。
はじめまして
こちらのコンテンツスライダーを作成したサイトで使わせていただいております
スライドの動きなのですが、
真ん中にスライドする際に、フェードインしながらスライドさせることは可能なのでしょうか？
試行錯誤してみたのですがうまくいかず。。。
もしよろしければ教えて頂けないでしょうか
よろしくお願い致します。
＞junさん
コメントありがとうございます。
このコンテンツスライダーをご使用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
仰られている正確な動作を想像することができないのでいるのですが
もともと左右に表示されている前後の画像が
スライド（真ん中に移動）する時に一度消えて
フェードインするということでしょうか・・・？
その様な動作は当スクリプトでは想定していなかったものでもあり
実装は厳しいかと思っております。。
ご確認ください。
よろしくお願いします。
BlackFlag様
さっそくのご返信ありがとうございます。
言葉足らずで申し訳ございません！
左右の画像が、半透明になっているかと思いますが
その画像が真ん中にスライドするときに
半透明から徐々に通常の透明度(透過無し)になりながらスライドできないかなと思いまして。。
やはり難しいでしょうか。
よろしくお願い致します。
＞junさん
返信ありがとうございます。
現在の仕様ですと
左右の画像は半透明というより
画像の上に透過させた白いボックスを置いて
透過させているように見せている、という関係と
真ん中に表示されている画像に対しても
特にアクティブ状態を判別させる指定を入れていないので
ちょっと厳しいかもです。。。
もっと汎用性の持てる構成で
スクリプトを組み直せたら
またここで紹介させていただきます。
よろしくお願いします。
こんにちは
chocoと申します。
素敵なスライダーを早速使わせていただきます。
写真を差し替えて、HTMLのプレビューで見たら、
普通にきれいにできましたけど、
なぜ
の形式でネットページにの載せたら、何も表示しなかったです。
ちなみに、ｃｓｓもFTPに入れました。
まだまだ未熟で、
ご指導いただければ幸いです。よろしくお願い致します。
chocoです。
たびたびすみませんが、
FTPに入れるCSSの名前ですけど、
common、bestのような名前を変更したら、
設定値の内容を変わっても、認識しないことですか？
後、ショップの商品ページなので、ブラウザの幅を全部使わなければ、
このタイプを使えないですか？
もしよろしければ教えて頂けないでしょうか
よろしくお願い致します。
＞chocoさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
お試しいただいている様で嬉しく思っております。
ご質問いただきました件についてですが
実装されているページを確認できないので何とも言えないのですが
CSSファイルの名前を変えたとしても
HTMLから読み込む際のCSSファイル名が同じであれば大丈夫です。
幅100％ではなく固定幅での実装パターンは
——————————————————–
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderFixWidth.zip
——————————————————–
この様な形で用意しておりますので
こちらもご参考にしていただけると幸いです。
お試しください。
よろしくお願いします。
BlackFlag様
さっそくのご返信ありがとうございます。
ページに表示できましたけど、
ちょっと質問してもいいですか？
一回目のスライダーが終わった後に、
繰り返しの二回目の同じ画像のスライダーに、画像表示がなくなりました。
これはどうしたらいいですか？
また、全体の幅を調節したら、NEXT＆prevの矢印画像もなくなったので、
どうやって調節したらいいですか＞
知恵と力を借りてください！！
BlackFlag様
たびたび、すいません。
いただいているファイルの形は全体の幅は800ですか？
そのままの形を width＝”600”のページに表示したければ、
＝＝＝＝＝＝＝＝＝＝
#container {
margin: 0 auto;
width: 600px;
text-align: center;
}
.wideslider {
width: 100%;
height: 400px;
text-align: center;
position: relative;
overflow: hidden;
＝＝＝＝＝＝＝＝＝＝
この感じで変えたら、画像を真ん中ではなく、ちょっとずれて、＜ ＆ ＞の矢印もなくなって。
一回目の後、繰り返すのもう画像表示ができなくなった。
すみません、下手な説明で
宜しくお願いします。
始めまして。素敵なコンテンツスライダーを公開して頂いて感無量です。
一つご教授頂きたいのですが、幅100%でスライドさせる画像のサイズを変更するにはどうしたらいいのでしょうか？
scriptの baseWidth = 800, baseHeight = 500,を変更したらいけるのかなあと思っていたのですが、widthを1000pxに変更すると一番最初のコンテンツのみ左にスペースができてしまいます…。
申し訳ありませんが、ご回答頂けますと幸いです。
よろしくお願いいたします。
＞chocoさん
実装されているページを確認できないのと
どのような形状で実装しようとされているのかが分からないので
何とも言えないのですが、
まずは実装しようとされているページで
きちんとCSSのブラウザリセットがされているかどうかご確認ください。
それと、実装しようとしている形状を
当記事で紹介しているサンプルファイルをカスタムして試してみてから
ご自分のページに実装してみるといいかと思います。
お試しください。
よろしくお願いします。
＞ひろみんさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
サイズの変更はスクリプトの「baseWidth」「baseHeight」の各値と
HTMLソースの＜img＞タグの「width」「height」を変更することで実現できると思います。
余白が空いたりする場合は
実装するページでCSSのブラウザリセットが
きちんとされているかどうかご確認ください。
よろしくお願いします。
BlackFlag 様
このページに入れましたけど
http://item.rakuten.co.jp/worldmarket/c/0000000895/
見ていただけませんか？
FtpのCSSファイルにcommon.cssの名前他にもあったので、同じの使えなくて、
名前を変更していて、FTPに入れまました。
実装するページでCSSのブラウザリセットが
きちんとされているはずだけど、
どうすればいいかご教授いただけますでしょうか？
どうぞよろしくおねがいします！
こんにちはdeoshiと申します。
スライダーを早速使わせていただきたいと思っております。
スライダーをフェードインに変更する事は可能でしょうか？
宜しくお願い致します。
＞chocoさん
ページの方、確認させていただきましたが
CSSでいくつか変更されている点がありましたので
下記の部分を再度ご確認いただけますでしょうか。
「.wideslider」の
「text-align:center;」は「text-align:left;」
「.wideslider ul, .wideslider ul li」に
「float: left;」が抜けているので追記
この2点を直せば正常にスライドするのではないかと思われます。
お試しください。
よろしくお願いします。
＞deoshiさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
現在の仕様ですと
左右の画像は半透明というより
画像の上に透過させた白いボックスを置いて
透過させているように見せている、という関係と
真ん中に表示されている画像に対しても
特にアクティブ状態を判別させる指定も入れていないので
現状では少々厳しく感じております。
もっと汎用性の持てる構成で
スクリプトを組み直せたら
またここで紹介させていただきます。
よろしくお願いします。
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag
こちらの記事を参考にスライドショーを作成してみました。
とてもわかりやすい内容だったので
綺麗に仕上がりました。
ありがとうございます！
１点よろしければご教授いただきたいのですが、
スマホ、タブレットで横に傾けると
中央画像も左右の写真のように透過状態となってしまいます（＞＜）
もしこちらの回避方法があれば、教えていただきたいと思います。
よろしくお願いいたします。
＞くろさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
ご活用いただいているようで嬉しく思っております。
ご質問いただきました件についてですが
こちらでも確認してみたところ
当記事で紹介しているサンプルでは
その様な現象は確認できずにいるのですが
当記事のページでも同じ現象が起こるのでしょうか。
（その場合はご確認いただいている端末の種類などお知らせいただけると幸いです。）
当記事を参考にして他で実装された後に
そのような現象になった場合は
考えられることとしては
HTML側のmetaタグにviewportの設定がされているか、などが
挙げられますので、一度確認してみてください。
よろしくお願いします。
BlackFlag 様
すぐにお返事いただけて大変うれしいです。
ありがとうございます。
まず、こちらのサイトをスマホ・タブレットで確認したところ
正常に動作しておりました。
私の方で取り入れる際にカスタマイズしており
その影響で正常に動かなかったようです。
いくつかカスタマイズしたのでどこが原因か検証したところ
baseWidth = 800
baseHeight = 500
こちらを変更した際に、不具合が発生してしまうようでした。
変更した内容は
baseWidth = 1200
baseHeight = 550
もちろんhtmlのimgも変更しております。
印象としては、左右の幅が広がってしまうような感じ？でした。
検証環境はiPhone4のsafariになります。
＞HTML側のmetaタグにviewportの設定
こちらはとくに設定しておりません。
私の方でも色々と試行錯誤して原因を探してみようと思います。
はじめまして。
素晴らしいスライダーをありがとうございます！
当方、wordpress3.5.1で使用させて頂いています。
ご教授願いたいのですが、chromeとIE8でwideslider_wrapのstyle=leftの値（マイナス値）が増え続けてしまいます。firefoxとIE9では正常に動作します。
scriptの「$」を「jquery」に置き換えて使用しているのですが、何か関係がありますでしょうか？ 画像サイズは1024pxです。
お手数お掛けしますが、何卒、宜しくお願い致します。
＞くろさん
こちらでもサンプルファイルを
幅1200px、高さ550pxにしてみましたが
iPhone5、iPhone4Sで確認する限り
正常に動作しておりました。。
iPhone4の端末が身近に無く、確認できておりませんが
また確認することができたら調査してみます。
よろしくお願いします。
＞toshizoさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただき
とても嬉しく思っております。
ご質問いただきました件についてですが
WordPressのバージョンは特に動作には
関係しないと思っております。
どのような構成で実装されているか
確認できていないので何とも言えないのですが
考えられることとしては
—————————————–
$(function(){
$(window).load(function(){
～ ここにスクリプトを記述 ～
});
});
—————————————–
この様にスクリプト全体を囲い
ウィンドウ読み込み後に実行させる構成にすることで
もしかしたら解消されるかもしれません。
お試しください。
よろしくお願いします。
BlackFlag 様
その後の経過をお知らせします。
私の方で、2013/07/09の記事
「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」
こちらを見落としておりまして、
こちらのjQueryに差し替えたところiPhoneでの不具合が
解消されました。
十分に調べずに質問してしまい、申し訳ございませんでした。
こちらのjQueryでとても助かっております。
ありがとうございました。
BlackFlag 様
お忙しい中、早急にご解答いただきありがとうございます！
ご指摘いただいた通り、スクリプト全体を囲ってみたのですが、ダメでした…。
こちらのサイト見て頂けますか？
———— URL削除 ————
どうしてもIE8とChromeで表示が崩れてしまいます。
色々と試行錯誤してみたのですが、原因がわかりません…。
お恥ずかしながら、クライアント様のサイトですので、
アドレスは非公開にしていただくことは可能でしょうか？
本当に勝手で申し訳ございません。
お手数お掛け致しますが、宜しくお願い致します。
＞toshizoさん
URLのご連絡ありがとうございました。
全体を確認してみたところ、
スクリプト自体は動作に問題はなさそうで
読み込んでいる「style.css」の中の指定が
スライダー動作に影響してしまっているようです。
「基本タグ」とされている箇所の
—————————————-
img{border:none;max-width:100%;height:auto;}
—————————————-
を削除することでスライド動作は動くと思われますので
その他、全体に掛かるCSSの指定の部分など
再度調整してみてください。
よろしくお願いします。
BlackFlag 様
ありがとうございます！ 解決しました!!
本当に何とお礼を申し上げて良いか分かりません。
自分の未熟さを痛感いたしました…。
今後ともBlackFlag様のサイトを参考にさせていただき、
頑張りたいと思います。
本当にありがとうございました。
＞toshizoさん
無事に問題も解決して
理想の動作が実装できたようで安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
BlackFlag様
いつも参考にさせていただいております。
このスライダーも、とても勉強になり、満足させていただいているのですが、
このようなサイトを実現したくて、悪戦苦闘しているのですが、
どうもうまくカスタマイズ出来ません。。。
http://sp.elle.co.jp/fashion/features/2012awtrend/#bag
問題としては２つあり、
１つは、常に左上に表示されているナビゲーションのようなものを表示している画像のぴったり左上に固定することが
出来ません。
もう１つ、画像の縦のサイズが1000px近くあるのですが、つぶすことなく画面のサイズに合わせて
縮小・拡大することが出来ません。
どうか解決策をご教授していただけたら幸いです；；
＞nomaismさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実際にどの様な構成で作成されているのか
確認できていないので何とも言えないのですが
左上のナビゲーションを画像に合わせるには
ナビゲーションエリアを「position:fixed」ではなく
「position:absolute」にすれば実現できるのではないでしょうか。
縦サイズについては
どのような仕様を想定されているのかが
ちょっと判断できずにおります。
以上になりますが
ご確認よろしくお願いします。
BlackFlag様
お返事誠にありがとうございます！
absoluteにすると画面のサイズによってズレが生じてしまいます。。。
縦の動きに関してはhttp://webdesignrecipes.com/sample/perfect-full-page-background-image-with-css/
このような動きをしたいと考えております。
状況説明が下手で申し訳ありません。
URLを載せておきますので、ご確認頂ければ幸いです。
＞nomaismさん
URL確認させていただきました。
ご連絡いただきました件についてですが
当スクリプトの動作というよりは
全体のHTML／CSSの構成の問題と思われ
ここのコメント欄のみで全体のページ構成から
アドバイスさせていただくのは少々厳しいかと思っております。
参考にされているページのHTMLとCSSを
まずまるっとコピペなどしみて
HTMLとCSSの全体構成を理解しながら
ご自分の理想の動作にカスタマイズしてみてください。
よろしくお願いします。
BlackFlag様
お返事、アドバイス誠にありがとうございます。
もう一度見直してみます。
ありがとうございました！
こちらの「jQueryFullWideSliderHoverStop」が目的にぴったりで使わせて頂きましたが、少しご相談です。
ページネーションにCSSで透過PNGの背景画像をあてたのですが、IE8＋透過指定だと黒フチが出てしまうのでJS上で pnOpacity=1 に設定すると、Prev/Nextエリアがマウスオンで白くなり、そのままになってしまいます。
（jquery.belatedPNG.jsで透過対処も試しましたが今度はIE9でおかしくなったり…）
単純に ページネーションのみ 透過指定を削ることは可能でしょうか？
よろしくお願い致します！
本日書き込みさせていただいた者です、たびたびすみません。
質問した内容ですが、改めてコメント欄を読んでいたところ
下記のコメントがまさにこの件でした。
- – - – -
記事内のスクリプトの122、124、153、155行目にあたる
opacityの値に記述されている「pnOpacity」を「btnOpacity」に変更してみてください。
- – - – -
私のダウンロードした「jQueryFullWideSliderHoverStop.zip」の中身を、
上記のように変更したところばっちり直りました。
しっかりチェックするべきでした…；
改めて、ありがたく使わせていただきます。
＞Matchaさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
透過PNGのロールオーバーについて
問題の事象も無事に解決され
理想とされている動作が実装できた様で
安心致しました。
また何かありましたら
ご連絡くださいませ。
よろしくお願いします。
はじめまして。
いつも拝見させていただいております。
スライダーにマウスを載せた時はスライドが止まる仕様かと思いますが、
マウスがあっても無視してスライドさせ続けるにはどこを変更すればよろしいでしょうか？
「jQuerySimpleImageSlideShow」の記事を参考に探しましたが、知識不足の為に分かりませんでした。
お手数をおかけしますが、ご教授いただいえると助かります。
＞かじやんさん
コメントありがとうございます。
ご質問いただきました件についてですが
当記事で紹介しているコンテンツスライダーは
デフォルト状態ではマウスオーバーしても
スライドストップさせる仕様にはしておりません。
コメント内でその様なタイプも紹介しておりますが
まずは記事本文最後にリンクさせているサンプルファイルから
動作の方ご確認ください。
よろしくお願いします。
はじめまして。
いつも困った時に拝見させていただいております。
ありがとうございます。
今回こちらの動きがかなり理想的でしたので、
利用させていただきました。
ただ、画像（width:750px）を8枚以上に増やすと
記載したURLのように8枚目をクリックすると
ひと回りしてから次もしくは前の画像を表示します。
仕様上の動きと異なり原因がわかりませんでした。
もし解決方法がお分かりになるようでしたら
お手数ですが、ご教授いただければ幸いです。
よろしくお願いします。
度々すいません、昨日投稿した者です。
動作不具合の件、URLが間違っておりました。
以下が正しいものです。
http://ayakabi.co.uk/jpn/basic-collection/oxfordshoes.html
ちなみに昨日から、色々試してみていますが
画像の枚数を7枚以下にすると正常に動きました。
もし解決策がお分かりになられましたら、
お手数ですが、ご教授下さい。
宜しくお願いします。
＞マーサさん
コメントありがとうございます。
当記事のスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
ご連絡いただきましたURLを確認する限り
正常に動作しているように見えるのですが
動作の不具合が起こる環境を教えていただけますでしょうか。
※OSおよびブラウザ（バージョンも）
当記事でダウンロードできるサンプルファイルでも
同様の現象が起きるということでしょうか。
ご確認よろしくお願いします。
初めまして。
ウェブ制作をしております。
すばらしいスライダーに巡り会えまして、喜んでいるところです。ばっちり動作しております。
一点、ご教示お願いしたいのですが、next/prev ボタンをブラウザの幅いっぱいの位置に持っていくことができないでしょうか？
スクリプト部分を改変させていただこうと思ったのですが、スキル不足で苦慮しております。
どうかよろしくお願いいたします。
＞トレジャーさん
コメントありがとうございます。
当記事のコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
ご希望されている形状が把握できずにいるのですが
Next/Prevボタンの「＜」「＞」のマークを
ブラウザの両サイドに配置する、ということでしょうか。
その場合はCSSの背景画像の位置指定を調整させることで
実現可能になるかと思っております。
ご確認ください。
よろしくお願いします。
BlackFlag様
早速のお返事大変ありがとうございます！！
＞ ご希望されている形状が把握できずにいるのですが
＞ Next/Prevボタンの「＜」「＞」のマークを
＞ ブラウザの両サイドに配置する、ということでしょうか。
＞ その場合はCSSの背景画像の位置指定を調整させることで
＞ 実現可能になるかと思っております。
はい、おっしゃる通りです。で、試してみました。（マークのファイル名変えました。）
.slider_prev {
background:url(prev.gif) no-repeat left center;
}
.slider_next {
background:url(next.gif) no-repeat right center;
}
そこで、もうひとつご教示を。。
ブラウザをリサイズするまで「＜」「＞」マークが表示されないんです。
リサイズすると表示されます。リロードでは表示されないです。
恐縮ですが、よろしくお願いいたします。
＞トレジャーさん
ご連絡ありがとうございます。
こちらで再度スクリプトを確認したところ
記述の追加が必要でした。
当記事で紹介しているスクリプトの82行目を
————————
}).resize();
————————
このような記述にしてリサイズ動作を実行させることで
ページロード時にも両端に矢印が表示されるようになるかと思います。
記事内に記述されているスクリプト及びサンプル動作、
ダウンロードできるサンプルファイルのスクリプトも変更してありますので
あわせてご確認いただければと思っております。
お試しください。
よろしくお願いします。
BlackFlag様
ご教示ありがとうございました！！
思った通りの動作です。
本当にありがとうございました。
お礼が遅くなってしまい、申し訳ありません。
今後ともよろしくお願いいたします。
求めていたタイプのスライダーだったので、
早速、実装してみました。
レイアウト崩れも無く、動作も問題ないので、
とっても助かりました！
このスライダーはカスタマイズすれば、スライドする際に一度、
スライドする画像を白く光らせることはできるでしょうか？
＞ike0521さん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
画像を光らす件についてですが
各ボタンのクリック動作部分をカスタマイズすることで
不可能ではないかと思います。
当記事のタイプではアクティブ状態の画像に対して
特定の判別はしていませんが、
同タイプのスライダー記事
—————————————————-
・jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
http://black-flag.net/jquery/20130709-4710.html
—————————————————-
こちらのパターンの場合だと
アクティブ状態の画像に対してクラスが入るようにしてありますので
比較的カスタマイズしやすいかと思います。
お試しください。
よろしくお願いします。
当初、bxsliderで実現できないか調べていたところ考えていた通りの動きをするスライダーに出会えました。
ありがとうございます！
このscript部分を外部のjsファイルにおいて読み込ませる場合、どのような形になりますでしょうか？
お時間が許せばご教授いただければうれしいです。
よろしくお願いいたします。
＞szさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいているようで
嬉しく思っております。
当記事のスクリプトを外部ファイル化する場合は
スクリプトの3行目と159行目の2行は削除して
4～158行目を外部ファイル化して読み込んでもらえれば大丈夫です。
お試しください。
よろしくお願いします。
いつもjQueryでは大変お世話になっています。
今回、こちらもjQueryを設置したいと思い、サンプルをDLさせていただきました。
ひとつお伺いしたいのですが、他の方への返信で
>左右の画像は半透明というより
>画像の上に透過させた白いボックスを置いて
>透過させているように見せている
とありましたが、黒の半透明にすることはできるのでしょうか？
お忙しいところ大変申し訳ございませんが、ご教授いただけたらと思います。
よろしくお願いいたします。
＞ともさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた左右の半透明エリアの背景色についてですが
色指定についてはCSSで指定しておりますので
黒にする場合は「.slider_prev」「.slider_next」に指定してある
「background:#fff」のところを「#000」としてみてください。
お試しください。
よろしくお願いします。
私も使わせていただき、本当に本当に助かりました！！
設置もカンタンで、機能面も理想的で素晴らしいです。
猫にも癒されました・・・ありがとうございます。
＞ふ さん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
そのようなお言葉をいただけると
とても嬉しく励みになります。
ほかにもいろいろと紹介させていただいておりますので
Webサイト制作の際にあれこれお試しいただけると幸いです。
よろしくお願いします
いつも参考にさせて頂いています。
このコンテンツスライダーを使わせて頂こうと思っています！
＜li＞＜/li＞の中の要素ですが、
＜img＞だけではなく、中に複数の＜div＞要素を組み込み、
その組んだ内容をそのまま現状の＜img＞での見え方のように
スライドさせることは可能でしょうか？
スキル不足で苦慮しております。
お忙しいところ恐れ入りますが、
ご回答をお願いいたします。
＞ちゃむさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
当記事のコンテンツスライダーでは
スライドする個々の＜li＞の中は＜img＞以外でも
タグを自由に配置できる仕様になっておりますので
＜div＞などを追加してCSSにて位置を指定しながら
パーツを配置してみてください。
（＜li＞にクラス等を付与する形でも可能になっております。）
お試しください。
よろしくお願いします。
こんばんは。
とても良いサイトで重宝しております。
このコンテンツスライダーを実装したのですが表示がずれたり、最後の画像から最初の画像を表示する際に歯抜けになったります。
なぜこのようになるのか教えていただけませんでしょうか？
以下、クライアント様なので勝手ではございますが、URLは非公開にしていただけますようお願いします。
— URL削除 —
＞マツさん
コメントありがとうございます。
このコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
おそらくCSSのブラウザリセットがされていない影響ではないかと思われますので、
作成されているWebページ内にCSSブラウザリセットを追加するか
CSS内にスライダー部分の「margin」と「padding」の値を0にするように
———————————————
.wideslider,
.wideslider * {
margin: 0;
padding: 0;
}
———————————————
を追記してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
おはようございます。
ご教授いただいた方法できちんと表示されました。
一元でありながら迅速かつ、ご丁寧なご回答をいただきましたことにとても感謝しております。
ありがとうございました！！
これからもこのように役立つサイトの運営、頑張ってください。
応援しております！！！
CSS内にスライダー部分の「margin」と「padding」の値を0にするように
———————————————
.wideslider,
.wideslider * {
margin: 0;
padding: 0;
}
———————————————
を追記してみてはいかがでしょうか。
＞マツさん
ご報告ありがとうございます。
無事に問題も解決したようで安心致しました。
CSSの記述についても今後検討させていただきます。
また何かありましたらご連絡下さいませ。
よろしくお願いします。
初めまして。サイト制作中で、ブラウザいっぱいのスライダーを使いたくて探していたところこちらにたどり着きました。求めていた動作そのものだったので使用させて頂く事にしました。大変助かりました！ありがとうございます。
1点、可能かどうかお教え頂きたいのですが、このスライダーに合わせてコンテンツの内容も切り替えたいなと考えています(テキストと画像など)。
javascriptの知識が全くなく、今から勉強しながらやっていこうと思うのですが、そもそもそんな事は可能でしょうか？
突然やってきて不躾な質問で恐縮ですが、宜しくお願い致します。
＞たきおさん
コメントありがとうございます。
当記事のコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
スクリプト構成をそれなりにカスタマイズさせる必要があると思いますが
その様な動作をさせることは可能だと思っております。
当ブログ別記事で、
サムネイルをクリックすることでコンテンツ要素を切り替えるスライドショーや
タブ切り替えスクリプトなども紹介させていただいておりますので
それらのスクリプト構成等、参考にしてみていただけると幸いです。
よろしくお願いします。
はじめましてサイト制作中にこちらのページにたどりつきました！
すばらしいサンプルばかりで参考になるものばかりです。
全くに度素人で申し訳ございませんが
一点質問がありメールさせていただきました。
jQueryイージングプラグインを使ってスライドアニメーションにイージング処理をつけて、
ページネーションをスライドエリアの外にしてサムネイル表示にした場合は画像の中身を置き換えれば
ページネーションのクラス.pn1 ～ pn5までは表示されますが
＜a href=”#6″ rel=”nofollow”＞＜/a＞
を追記しsample.jpgとpn6.jpgを他のように作成し、表示させるとスライドショーにはsample.jpgは
表示されますがpn6.jpgがカーソルを重ねると存在を確認できるのですが、真っ白の状態でイメージと
してpn1～pn5までのように表示されません。pn6以降を設定させる場合何か他に設定する場所が
あるのでしょうか？最終的にはpn10まで作って表示できればと考えております。
イメージのサイズなどはオリジナルと全く一緒にしております。
大変お手数ではございますが、ご回答いただければ幸いです。以上よろしくお願い致します。
＞マサさん
コメントありがとうございます。
当記事のコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ページネーションでサムネイル画像を追加する際には
CSS側で背景画像として指定する必要があります。
ページネーションをサムネイル画像にしているサンプルファイルの
「common.css」に書かれている「.pagination a.pn1～a.pn5」の部分の
プロパティをご参照ください。
お試しください。
よろしくお願いします。
細かいご対応ありがとうございました！
今後も参考にさせていただきたいと思います！
よろしくお願い致します。
お世話になっております。
サイト制作でこちらのスライダーを使用させていただいています。
とても美しいスライダーで惚れ惚れしています！
早速の質問で申し訳ありません。
こちらのスライダーをHPに設置したところ
IE、firefoxでは正常に閲覧できたのですが
クローム、iPhoneだと画像が表示されない不具合が出てしまいました。
またiPhoneですと、本体を横向きにした際は表示されるのですが
縦だと画像が表示がされません。
スライダーの上にz-indexでdivを乗せているのですがなにか関係はあるのでしょうか。
もしなにかお分かりになりましたらお返事いただけると幸いです。
（厄介な質問で申し訳ありません･･･）
＞ふゆきさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
お試しいただいている様で嬉しく思っております。
ご質問いただきました件についてですが
実装されているページを確認できないので何とも言えないのですが
当記事からダウンロードできるサンプルファイルでも
同じ現象が起こっているのでしょうか。
スクリプトだけでなく実装されようとしている
HTML、CSSに関してもサンプルファイルの構成と同じになっているか
比較してみていただければと思っております。
よろしくお願いします。
お世話になっております。
こちらのスライダーを使用させていただいています。
左右の透明な部分のサイズを変更したいのですが、どこを編集すればいいのでしょうか。
＞ひとしさん
コメントありがとうございます。
左右のボタンのサイズについてですが
幅はウィンドウサイズからスライド部分の幅を引いて
半分に割った値を自動で入れています。
値を入れている箇所はスクリプト80、81行目になります。
ご確認ください。
よろしくお願いします。
初めまして。お世話になっております。
サイト制作でこちらのスライダーを利用させていただいております。
思っていた通りの理想的なスライダーで、本当に感謝しきれません。
他にも素晴らしいサンプルや役立つ情報が盛りだくさんでとても助かっております。
早速、質問ではないのですが、こちらのスライダーを使うにあたり気になった事を。
注意事項で『複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。』との記載があり、二つ導入してみましたが、実際その通りでした。
しかし、組み込んだサイトの元々の仕様との誤作動か、時間差か、ローディングの関係か判断が当方で分かりかねますが同時にスライドが動く動作を何度か確認いたしました。
javascriptは全くの初心者でどのようになっているのか分からず。。
また、透過NEXT／BACKボタン部分の画像導入で、画像自体も透過されてしまうのも個人的には惜しいな…と思いました。
これからも素晴らしいサンプル、情報を楽しみにしています。
猫の画像もとても可愛くて癒されました…。
よろしくお願い致します。
＞ハグたんさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
お試しいただいている様で嬉しく思っております。
複数設置についてはあまり想定しておらず
カバーしきれていない部分もあるかもしれませんが
動作に関して改めて検証させていただきます。
NEXT／BACKボタン部分の画像を
透過させないようにすることも可能ですので
ご意見等、今後の参考にさせて頂きます。
よろしくお願いします。
初めまして。
実用的なスクリプトばかりでホントに勉強になります。
早速で恐縮ですが、コチラのスライダーを利用させて頂きたく検証を行っていたのですが
現在画像を内包しております＜li＞内にテキストのみ（ああああ等）を入れ確認をさせて頂いたところ
コンテンツが表示されず下部ナビデーターのみ自動で動いているような状況になってしまいました。
コメント欄を読ませて頂いたところimg以外も実装出来るとの事でしたのですが
なにがいけないんでしょう？
特に変わったことはしていないのですが。。。
ご確認頂けますと幸いです。
2014.05.21 に質問をさせていただいたふゆきと申します。
前回はご回答いただいたにも関わらずお返事ができずに申し訳ありませんでした。
前回の質問ですが
「IE、firefoxでは正常に閲覧できたのですが
クローム、iPhoneだと画像が表示されない不具合が出てしまいました。」
その後試行錯誤を重ねても解決できず･･･（iPhoneの向きによる不具合は直りました！）
分かった事がもう一点、
クローム、サファリ両方ともですが、ブラウザを立ち上げHPを開くと画像が表示されないのですが
F5などで画面の更新を行うと、その後は画像が表示されます。
今回スクリプト内で変更をしているのは
・ベースのサイズ
・左右のボタンの範囲（findPrev、findNextを+60しています）
・$(window).load(function(){ }); の追加（コメントの上の方で似たようなものがあったので追加してみました･･･）
が主に変更している点です。
サンプルをダウンロードし、
サンプルそのものをクローム・サファリにて動作確認をしましたが正常に動作していました。
何かお分かりになることがありましたらお返事いただければ幸いです。
宜しくお願いいたします。
すみません、質問の件ですが、どうやら不具合が直りました･･･。
おそらく$(window).load(function(){ });を入れたことにより正常に動作したのだと思います。
お騒がせして申し訳ありません･･･
これからもこちらのスライダーを使用させていただきたいと思います。
ありがとうございました。
いつも勉強させていただいています。
現在制作しているサイトでこのスライドを使用させて頂いているのですが、
スライドの動きを現在の右から左から左から右に変更することは可能でしょうか？
この形のスライドショーを他で見つけることができず、無償で提供して頂いているにもかかわらず
図々しいとは思いつつコメントさせていただきました。
よろしくお願い致します。
＞naoswinginさん
コメントありがとうございます。
このコンテンツスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問頂きました件についてですが
こちらでも検証してみたところ
画像ではない要素を入れ込む際には
スクリプトの一部に調整が必要でした。
当記事内のスクリプトおよびサンプルファイルを修正して
反映致しましたので再度ご確認いただければと思います。
よろしくお願いします。
＞ふゆきさん
コメントありがとうございます。
問題が解決して、正常に動作したようで安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
＞aotakaさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご希望の動作と合っているかは不明なのですが
スライドの動きを単純に逆にするには
スクリプト94行目の「findNext」を「findPrev」に変更すれば可能かと思っております。
お試しください。
よろしくお願いします。
初めまして。jQueryに興味があり、勉強を始めたばかりです。
こちらのスライダーがとても素敵なのでサイトに使用させていただきたいと思い設置させていただきました。
カスタマイズをしてみようと思ったのですが、勉強を始めたばかりであまりわかりません。
すみません、よろしければ教えていただけますでしょうか。
最後の画像まで到達するとストップする（戻ることしかできない）、または、最初の画像が最後の画像の方に進むことができないように、ループを解除することはできますでしょうか。
どうぞよろしくお願いいたします。
＞ mishiruさん
コメントありがとうございます。
このコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました動作についてですが
当記事のスライダーは左右に前後の画像を表示している見た目的なので
仰っている動作のような形では、スライダーの最初と最後の表示時に
見た目がおかしくなってしまうかと思われます。
こちらの認識が違う可能性も御座いますので
当記事で紹介している以外のスライダーを
—————————————————–
・jQuery / CSS3 TIPS
http://black-flag.net/jquery/20120801-4016.html
—————————————————–
こちらにまとめてもありますので
併せてご確認いただければと思っております。
よろしくお願いします。
BlackFlag様
はじめまして。
Wordpressにて、当コンテンツスライダーを利用させて頂いております。
無償提供によるサンプル等々、誠にありがとうございます。
さて、下記URLにて利用させて頂いております。
— URL削除 —
スクリプトを外部読み込み、若干cssを変更しました。
【お聞きしたい点】
PCブラウザ各種、スマホ・iPhoneほぼ全てにおいて、ページを開いた瞬間、「一瞬だけ」1枚目が左にずれて表示されてしまいます。その一瞬の後は、通常の動作になり問題がございません。
更新ボタンを押すと、その「一瞬ずれる」挙動はなくなります。
もし宜しければ、ご教授をお願い致します。
勝手ながら、クライアント様のHPなので、他コメントのように非公開で何卒宜しくお願い致します。
＞coyoteさん
コメントありがとうございます。
当記事のコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました動作についてですが
当記事のサンプルでも同じ現象が起きていますでしょうか。
もし起きていない場合はスライド部分以外のCSS含め
コンテンツの位置調整等を確認してみていただければと思っております。
もしくは解消法として「.wideslider」を
CSSファイル側では非表示「visibility:hidden;」にしておいて
スクリプト側でスクリプトが実行された後に「visibility:visible;」に変えることで
その様な現象は見えなくなると思います。
お試しください。
よろしくお願いします。
BlackFlag様
遅くなりました。
ご丁寧なご返信ありがとうございます！
「visibility」の記述を忘れていたことに気づき、
(記事のサンプルでは問題なかったので)再確認したところ、
カスタマイズの為に削除した一部のCSS内部の表記からvisibility部分が抜けていました。
=======================================
ClearFixElements
=======================================
ここから下をキチンと入れなおしたら、無事に表示されました。
本当にありがとうございました！
厚く御礼を申し上げます。
いつも拝見しています。
こういうスライダーを探していました！
他サイトのjsだと近いんだけどちょっと違う…とものばかりで困っていたらこちらで見つけました！
あー最初っからこのサイト見とけばよかった…
いつもわかりやすい解説ありがとうございます。参考にさせていただきます。
＞ともさん
コメントありがとうございます。
当記事のコンテンツスライダーがお役に立ったようで
嬉しく思っております。
その様なお言葉をいただけるととても励みになります。
他にもいろいろとスクリプトサンプルを
紹介させていただいておりますので
あれこれお試しいただけると幸いです。
よろしくお願いします。
いつも色々勉強させて頂いています。
スライダーいくつか試しましたが、やっぱりwidesliderが一番気に入っています。
オンマウスした時に一時停止する機能があれば完璧だなと思っていたら、修正版用意されていたんですね！望み通りの動きをしてくれるようになって大変満足しています。
横幅1100で設置して、PCでは綺麗に表示されるのですが、スマホだと微妙に左にずれて右側からとなりの画像がのぞいてしまいます。これも過去コメントに答えがあったりしますよね、きっと。探してみて分からなかったらまた質問させてください。
いつも活用させて頂いていて、一言お礼を申し上げたくてコメントしました。
これからもお世話になりますが、よろしくお願い致します。
＞さぼんさん
コメントありがとうございます。
当記事のコンテンツスライダーがお役に立ったようで
嬉しく思っております。
そのようなお言葉をいただけると
とても嬉しく励みになります。
ほかにもいろいろと紹介させていただいておりますので
Webサイト制作の際にあれこれお試しいただけると幸いです。
よろしくお願いします。
この度こちらのスライダーを、カラーミーショップで使用したく思い、
設置を試みたのですが、画像がぴったりと真ん中に収まらず両サイドの透過部分にずれ込んでしまいます。
また、最後の５枚目の画像が真ん中に表示された時に右側に空白が出来、スムーズに1枚目にループしない状態です。
全ての幅は100％にしており、画像幅もオリジナルのままの800でございます。
カラーミーのCSSで何かが邪魔しているのかと思うのですが、何かアドバイスがございましたらご教示お願い致します。
＞あんさん
コメントありがとうございます。
当記事のコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
カラーミーショップは使用したことが無く
あまりどういう構成になっているのか分からずにいるのですが
CSSのブラウザリセットがされていない影響も考えられますので
作成されているWebページ内にCSSブラウザリセットを追加するか
CSS内にスライダー部分の「margin」と「padding」の値を0にするように
———————————————
.wideslider,
.wideslider * {
margin: 0;
padding: 0;
}
———————————————
を追記してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
お返事有難うございます！
早速試させて頂いたところ、margin: 0; padding: 0; でとりあえずなおったようです。。
自分もまだまだ手さぐりなので、ヒントを頂けて大変助かりました。
有難うございました。
はじめまして、横幅いっぱい横スライダを探していてこちらのブログを参考にさせていただきたいと思っている者なのですが、わからないことがありまして、質問させていただきました。
出力結果として、#wideslider_wrap > ul が３つ横並びになった状態で表示されていると思うのですが、これらの長さ分のスクロールバーが横にでてしまいまして、javasriptに詳しくないので、修正できず困っております><
（もとのjavasriptを変に触ってしまったのかもしれないのですが・・・）
もし原因として考えられることがありましたら、アドバイスをいただけませんでしょうか。・・
こんなざっくりした質問で恐れ入りますが、何卒よろしくお願いいたします。
＞まゆさん
コメントありがとうございます。
当記事のコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
実際の画面構成を確認させていただかないと何とも言えないのですが
横スクロールバーについてはCSSの設定が抜けているせいかと思います。
「.wideslider」セレクタに
「overflow: hidden;」プロパティがきちんと入っているか
確認してみてください。
よろしくお願いします。
早々にお返事をいただきまして、ありがとうございます！
ご指摘いただいたとおり、私が変にさわってしまっており、CSSで非表示にしてしまっておりました！＞＜
解決いたしました！ありがとうございます、お手数おかけいたしました！
有益な情報提供ありがとうございます。
今後も活用させていただければと思いますので、どうぞよろしくお願いいたします！
とてもいい感じのスライダーで利用させていただきました。
一点、ご存じであれば、アドバイスをいただきたいのですが。
同一ページにスライダーを2カ所設定する際に、スタイルを.widesliderおよび.wideslider2としたcssとjavascriptを2つづつ用意したところ、一カ所、autoplayができなくなりました。（もう一方はautoplayで動いています）
双方とも、autoplayで動かしたいのですが。
よろしくお願いします。
＞BBさん
コメントありがとうございます。
当コンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
記事内に書かせていただいているとおり、
当初複数設置での自動再生アニメーションは非対応でしたが
簡単に実現できる手法がありましたので
スクリプトを改修させていただきました。
ダウンロードサンプルファイルとともに更新しておりますので
ご確認いただければと思います。
よろしくお願いします。
はじめまして。
webページをコツコツと作っている初心者です。
当サイトを観覧して、とても参考になりましたｗ
もし良ければ、教えて頂きたいのですが。
”横幅（ width) 960px内に収まるスライド” は可能でしょうか？
ご返答頂ければ幸いです。
宜しくお願い致します。
こちらのスライダーを活用させていただいております。
開始するスライドを1枚目からではなく、いろいろ変えてみたいのですが
上手くいきません。
ページネーションをjqueryからクリックさせたいと思って、
試行錯誤してみましたができませんでした。
上記の件について何かアドバイスがあれば、教えていただけませんでしょうか。
恐れ入りますが、よろしくお願いいたします。
＞aquerius24さん
コメントありがとうございます。
当記事のコンテンツスライダーをご活用いただいている様で
嬉しく思っております。
幅固定のサンプルについては
http://black-flag.net/devel/jQueryFullWideSlider/jQueryFullWideSliderFixWidth.zip
こちらに用意させていただいておりますので
ご確認いただければと思います。
よろしくお願いします。
＞かおりさん
コメントありがとうございます。
当コンテンツスライダーをご活用いただいている様で
嬉しく思っております。
ページネーションをjQueryからクリックさせるには
スクリプトの158行目と159行目の間くらいに
———————–
pnPoint.eq（2）.click（）;
———————–
と指定を追加すれば可能かと思います。
※（）を全角にしているのでコピペする際には半角に変更してください。
eqで指定している数字がクリックさせる番号となります。
eqでの指定は0から開始になるので、
0を指定すると1枚目、2と指定すれば3枚目の指定になります。
ページネーションをクリックさせる動作になるので
スライドアニメーションが実行されて
該当スライドを表示させることになるのでご了承ください。
お試しください。
よろしくお願いします。
返事が遅くなり申し訳けございませんでした。
この度は、わざわざ横幅指定のサンプルを作って頂き、誠に有難うございました。
本当に嬉しく感謝して居りますｗ
この先も新作や新たな情報を期待し又、勉強させて頂きます。
どうぞ、よろしくお願い致します。
ご返信ありがとうございます！
まさにやりたかったことができました！
ありがとうございました！！
こちらのスライダーのレイアウトが気に入り利用させていただこうと思っておりますが、
スライドさせる要素で＜video＞は対応していますでしょうか？
Demo↓
http://testpocket.com/cgcg/
こちらsource:line158 2つ目のスライドに
＜video＞要素を設置いたしましたが思うように動作せず…対策などございましたらご教示いただけますと幸いです。
※＜video＞自体は source:line219に同じものを設置してみましたが動作しております。
何卒よろしくお願いいたします。
＞Nissyさん
コメントありがとうございます。
当コンテンツスライダーをご検討いただいている様で
嬉しく思っております。
videoタグについてはもともと想定しておりませんでした。
動作についてはスクリプト内で
ulの要素をcloneを使って複製している関係で
videoタグの動作に影響が出ているのではないかと思われますので
videoタグの属性でautoplayなどを指定するのではなくて
スクリプト側からvideoタグに対して
操作すれば可能なのではないかと考えております。
（videoタグの属性は何もつけない）
ページ読み込み完了後に、
——————————————————
findWrap．find（’ul’）.eq（1）.find（’video’）;
——————————————————
といった指定でvideoを選択させ、
videoタグに対して「.play（）」などを使っての指定を加えれば
動作するのではないかと思っております。
※（）等を全角にしているのでコピペする際には半角に変更してください。
憶測での回答になり申し訳ありませんが
よろしくお願いします。