jQueryでの画像などのコンテンツ要素ループスライダーの改良版
以前に「jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法」
と題して、コンテンツ要素が無限ループするコンテンツオートスライダーの紹介をしましたが
機能部分でのリクエストなど要望もあって、改良版を作ってみたので紹介してみます。
以前のような自動でコンテンツ要素をループスライドする動作に加えて、
スライド部分にマウスオーバーすることで動作をストップする機能と
左右にボタン要素をつけ、スライド動作の向きを変化させる動きを追加したバージョンになります。
まずは動作サンプルから。
jQueryでの画像などのコンテンツ要素ループスライダーの改良版
10個並べてある画像が自動でスライドして無限ループする動作に加えて、
スライドしているコンテンツ要素にマウスオーバーをすると動作ストップ、
左右の「≪」「≫」のボタンにマウスオーバーするとスライドの向きが変化します。
この動作の全体構成について、
HTMLから。
[html]
◆HTML
[/html]
HTMLの構成は前回の記事と同じになっており、
大枠を任意のIDで覆い（サンプルでは「#loopslider」とします）、
そのブロック要素に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
スライドさせるコンテンツ要素を増やしたり減らしたりする時には、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
[css]
◆CSS
#loopslider {
margin: 0 auto;
width: 500px;
height: 100px;
text-align: left;
position: relative;
overflow: hidden;
}
#loopslider ul {
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider ul li {
width: 100px;
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider #loopleft {
top: 0;
left: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 99;
}
#loopslider #loopright {
top: 0;
right: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 99;
}
/* =======================================
ClearFixElements
======================================= */
#loopslider ul:after {
content: “.”;
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#loopslider ul {
display: inline-block;
overflow: hidden;
}
[/css]
CSSも前回の記事とほぼ同じ構成になっていますが
スライダーの左右に配置するボタンを形成するIDの指定が追加になっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
スクリプトの始めにある「$(‘#loopslider’).each(function()」がスクリプトを実行させるID名になるので
HTML側で全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
全体の構成はあまり変更していませんが
スクロールする距離や値の取得の方法を変えた影響で
スクロールスピードの変更が難しくなってしまいました。
全体の構成もちょっと荒いところがあるので
また時間があるときにいろいろカスタマイズが可能になるものに挑戦したいと思います。。
ご参考までに。。。
はじめまして！
理想的な動きのものを発見できて嬉しいです！＾＾*
サンプルを参考にソースを入れ替えたらバッチリ動いてくれて助かりました♪
こちらは左右に動くタイプですが上下に動くタイプもあったらいいな～などと思ったので書き込みさせて頂きました＞＜
ソースを書き換えたら上下に動くようになるのでしょうか…
もしよろしければ教えて頂けると嬉しいです！
よろしくお願い致します。
＞まりもさん
コメントありがとうございます！
このループスライダー動作をご活用いただいているようで
嬉しく思っております。
記事内で紹介している動作は左右のタイプになるので
スクリプト内ではリスト全体の幅の値を計算して動作しているのですが
縦の動作になるとリスト全体の高さを使って計算しいく構成になります。
「width」であちこち幅の値を入れている部分を「height」に変え、
「left」で移動しているアニメーションを「top」に変えることで
縦型のループスライダーにカスタマイズすることが可能になります。
縦型のループスライダーのサンプルを用意したので
下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStopVertical.zip
横型と縦型のスクリプトを見比べてみてください。
よろしくお願いします。
はじめまして。
現在webデザインの勉強をしているのですが、こちらのループスライダーを拝見し、使わせていただきました。
画像をロールオーバーしても動作をストップさせないには、スクリプトのどの部分を変更すればいいでしょうか？
よろしければ教えていただけませんか？
よろしくお願いします。
＞yusukesasaki さん
コメントありがとうございます！
このループスライダーのスクリプトをご使用いただいているようで
こちらとしても嬉しく思っております。
ご質問頂きましたロールオーバーでスライドがストップする動作を実行させない方法は
スクリプト内の
————————————-
function loopPositionLeft()
function loopPositionRight()
————————————-
の２つのfunction内にある
————————————-
$(this).hover(function(){});
————————————-
の動作を削除させることで可能になります。
実際に上記のスクリプト箇所を削除して
ロールオーバーしてもスライド動作がストップしないサンプルを
用意してみたので下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderLRmove.zip
スクリプト部分を見比べてみてください。
ご確認よろしくお願いします。
出来ました！
早々にご丁寧なお返事をいただき、本当にありがとうございます。
今後も参考にさせていただきます！
＞yusukesasaki さん
無事に思い通りの動作が実装できた様でよかったです。
ご報告ありがとうございました！
また何かありましたら
ご連絡くださいませ。
よろしくお願いします。
勉強の一環として参考とさせて頂いております。ありがとうございます。
一つ御試問なのですが、もう少し大きい画像を扱う場合でループスライダー全体の大きさを変更したい場合はCSSのどこを変更すれば良いでしょうか。
よろしく御教示ください。
＞komikomi さん
コメントありがとうございます。
ご質問頂きました一つ一つの画像の大きさの値を変える場合についてですが、
「#loopslider ul li」のwidthとheightが画像の大きさと比例するので
画像と同じサイズにしていただき、
「#loopslider」ここのwidthがスライダー全体の幅の値になるので
表示する個数の合計値にしていただくことで調整できると思います。（高さの値も画像に合わせます）
画像が幅150pxのものを6つ並びで表示する場合は
「#loopslider」のwidthは900pxということになります。
上記のCSSの値を調整しながら
試してみてください。
よろしくお願いします。
私が探していたプラグインです。
ひとつ質問なのですが、下から上に移動させたい場合はどこを変更すれば良いでしょうか？
よろしければ教えてください。
＞通りすがりさん
コメントありがとうございます！
ご質問いただきました、下から上に動く動作ですが
このループスライダーの縦型版も用意してありますが
こちらの動作でいかがでしょうか？
下記URLよりデータをダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStopVertical.zip
スクリプト内ではリスト全体の高さを使って計算しいく構成になり、
「width」であちこち幅の値を入れている部分を「height」に変え、
「left」で移動しているアニメーションを「top」に変えることで実装してあります。
横型と縦型のスクリプトを見比べてみてください。
よろしくお願いします。
お返事ありがとうございます。
さっそく使わせていただいたのですが、
ふと疑問が出てきましたのでまたコメントさせていただきました。
このスライドを１つの画面で３つ同時に使用したいのですが、
その場合はどこをいじればよいのでしょうか？
一応、#loopsliderを.loopsliderとしたクラス要素で作成してみたのですが、
上手くいきませんでした。
BlackFlag さんなら、どうするのか教えてください。
よろしくお願いします！
＞通りすがりさん
スクリプトご使用頂きありがとうございます。
このスクリプトはもろもろIDで制御してしまっているので
１ページ内に複数配置する想定はしていませんでした。。
Classに変更したりしてみましたが
全体の構成的にスクリプトのちょっとした改修では厳しいかもです。。
強引にやろうとするとなると
スライドエリアやスクリプト動作一つ一つに
01～03といったナンバリングを付けて
同じ動作を別々に設定する方法かと考えています。
１ページ内で、このスライダーを３つ動作させたパターンの
サンプルファイルを用意したので必要であれば下記よりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStopDUAL.zip
あまりキレイな方法ではないのですが
動作はしています。
ご確認よろしくお願いします。
Smooth Div Scrollのように、左右の帯部分にカーソルを合わせた位置により、スクロール速度が変わるようにしたいのですが、うまくいきません。
いつか作ってほしいです！お願いします。
＞まゆこさん
コメントありがとうございます！
このスクリプトだと左右の矢印でスクロールのスピードを変化させる動作は付いていませんが
時間が出来たらそのパターンも試して紹介してみますね。
しばらく（？）お待ちください。。
以前の分を使わせていただきました。
理想通りのものがみつかりとてもうれしいです。
ですが、IEだけ動きません・・・
ねこの動作サンプルも動いていません。
設置方法や対処法があれば教えてください！
おねがいします
＞iceさん
コメントありがとうございます！
このスライダーをご活用いただいているようで嬉しく思っています。
IEで動作しないというのは「IE9」ということでよろしいでしょうか？
IE9の場合、この手のスクリプトはjQueryライブラリのバージョンが
新しめのものでないと動作しないようなので
jQueryライブラリをバージョン1.7.1くらいのものを使用してみていただけますか？
この記事のサンプルおよびスクリプトも変更させていただきました。
ご確認よろしくお願いします。
早速のお返事ありがとうございます！
1.7.1にしたら動きました♪
助かりました(*^_^*)
IEだけ動き始めにかくかくっとなるのですが、
わたしだけでしょうか？
＞iceさん
ご連絡ありがとうございます。
無事部動いたようで安心しました。
動作開始時に動きが鈍くなるのは
サーバ環境などによって発生することがあるかもしれませんね。。
その場合はスクリプト全体をページロード後に実行させるように
以下のような構成にすれば解消するのではないかと思っています。
——————————————
$(function(){
$(window).load(function(){
～ここにスクリプトを記述～
});
});
——————————————
お試しください。
よろしくお願いします。
探していたものにぴたりと合うものを発見できて大変助かりました。
導入以後数日いろいろ試してみたものの、wordpress3.4環境で動作がうまくいかずコメントしました。
うまくいかない点
①10個の画像が流れたあと一度画像が左側にすべて消えてからでないと次のループに移行しない。（htmlでのmarqueeタグみたいな感じ）
②ページをロード直後、最初の画像左側に余白ができる。
現状
・wordpress3.4
・wordpress同梱のjQueryは読み込まずhttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1だけを使用
・wordpressの入っていない別ディレクトリで試すと問題ない
・IE9とFirefox13にて確認
wordpressでなければ動いているので、不躾な質問で大変申し訳ございませんが、何かアドバイス等いただけると幸いです。
＞やえさん
コメントありがとうございます。
このスクリプトをご活用いただき嬉しく思っています。
ご質問いただきました件についてですが
その様な事例はまだ経験がないので明確な原因は分からないのですが
おそらくWordPress3.4が要因とかではない気がしています。
想定できることであれば、
実装する際の他のCSSの指定の影響などではないかと思われますが
組み込んだ際にCSSのブラウザリセットとかはされていますでしょうか？
最低限のブラウザリセットである
—————————————
*{
margin: 0;
padding: 0;
}
—————————————
がCSS内で設定されているか
確認してみていただけますでしょうか。
よろしくお願いします。
迅速な回答ありがとうございました。
ご指摘の通りブラウザリセットの影響でした。
ulとliをリセットしていなかったのが原因・・・
初歩的なミスでお時間をいただいて大変失礼いたしました。
＞やえさん
実装のご連絡ありがとうございました。
無事に解決して理想の動作が実装できたようで
安心致しました。
また何かありましたらご連絡くださいませ。
今後ともよろしくお願いします。
初めまして。
イメージしていものにやっと巡りあえて、早速使わせて頂きました。
ステキなスライダーを作って下さってありがとうございます！
所で、１点お伺いしても宜しいでしょうか？
最初はスライダーの動きを止めていて、矢印部分にカーソルを合わせた時のみ
動かすには、どのようにしたら良いでしょうか…？
突然の質問で大変失礼致します。
もしお手隙でしたらご返信頂けますと大変嬉しく思います。
どうぞ宜しくお願い致します。
＞kiriyaさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきましたスライダーの矢印部分のみでの操作についてですが
ひとまずここで紹介しているスクリプトを
強引に書き換えて実装させたサンプルを用意しましたので、
下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverMove.zip
ページロード時には自動スライドは動作させずに
左右の矢印ボタンにロールオーバーした際に再生させる処理に変更してあります。
実際は一からスクリプト構成を作り直した方が
きちんとしたものを作ることが出来ると思っているので
また時間ができた際にここで同様の動作スクリプトを紹介してみたいと思います。
よろしくお願いします。
早速のご返信、ありがとうございます。
また、変更版のスクリプトも作って頂き、大変感謝致します。
早速設置してみましたが、理想通りに動いています。
ありがとうございます…！
一から作った方がさそうなのですね。
スクリプトの世界はまだ分からないことばかりですが、
是非またお邪魔して勉強させて頂ければと思います。
この度はありがとうございました。
先日は回答ありがとうございました！
マウスオーバーで動かなくなるのは解決いたしました。
もうひとつ質問がございます。
を増やしていけば長さも変わるとのことですが【１～１０個＋タイトル１個】を作成しましたが
１～８個＋タイトル１個しかでません。。。
どうすれば全部でることができますでしょうか？
http://crossroad.shichihuku.com/
よろしくお願いします！
＞kiriyaさん
ご返信ありがとうございました！
変更スクリプトがお役に立ち無事に理想の動作が
実装できたようで安心致しました。
スクリプトは始めは分かりにくいかもしれませんが
jQueryは、ある程度の決まりが分かってしまえば
動作の組み合わせで遊べるスクリプトだと思うので
いろいろ試してみてください。
今後ともよろしくお願いします。
＞ゆーたさん
ご返答ありがとうございます。
実装されているURLを確認させていただきましたが
＜ul＞にstyleでwidthが設定されてしまっているのを外す必要があるのと、
＜li＞は全て同じ幅になっていないと計算が合わなくなってしまうので
一番初めの＜li＞に設定しているpaddingの設定が入らない構成で
組み立てられるようにしてみてください。
よろしくお願いします。
はじめまして。
スライダーを検索してて、たどり着きました。
素敵なスライダーを公開して下さって感謝しております！
さっそく色々試させていただいております。
その中で、写真の境界に1pxのボーダー、またはマージンを入れたくて、
のCSSに、「border-right-width: 1px」または「margin-right: 1px」を指定し、
#loopsliderのワイドには、3枚の写真幅+3px（1px × 3）を指定し、
に計9枚の写真を入れてみたところ、、、
最初と最後の写真の間に、ちょうど写真1枚分（つまりで指定しているワイド）位の
空白が空いてしまいました。。。途中空白になりますが、ループはしています。
もしよろしければどこが悪いのか、ご教授いただけると嬉しいです。
よろしくお願い致します！
＞yokoさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
とても嬉しく思っております。
ご質問いただいた点についてですが
構成上＜li＞にボーダーやマージンをつけると全体の計算が合わなくなってしまい
ループの際に空白があいてしまったりする現象が発生してしまうので、
同様のことをやるとすると＜li＞のwidthはボーダーやマージンを含めた値を設定しておいて
＜li＞の中に入れ子にしている要素にてボーダーやマージンをつける構成にすることで可能かと思っております。
少々分かりにくいかもしれませんが
ご確認よろしくお願いします。
はじめまして！BlackFlag 様。
とても素敵なスライダーに出会えて感謝感激です。
色々試しておりますが、下記の点がどうしてもできません。
・枠外に □□□□ というナビゲーション（ボタンなど）をつくる。
・□をクリックするとそれに対応した写真が一番左に早送りのように移動する。
もし宜しければ、ご教示頂ければと思います。
＞sera_hkさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
嬉しく思っております。
ご質問いただきましたナビゲーションボタンを組み込む方法についてですが、
簡単に実装するには以下のような方法があるかと思います。
HTMLには
————————————–
＜a href=”javascript:void(0);” class=”num1″＞□＜/a＞
＜a href=”javascript:void(0);” class=”num2″＞□＜/a＞
＜a href=”javascript:void(0);” class=”num3″＞□＜/a＞
————————————–
とボタンを作ったとして、
スクリプト側は「$(‘#loopslider’).each(function(){」の中に
————————————–
$(‘.num1’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*0) + ‘px’},1000,’linear’);
clearInterval(setTimer);
});
$(‘.num2’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*1) + ‘px’},1000,’linear’);
clearInterval(setTimer);
});
$(‘.num3’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*2) + ‘px’},1000,’linear’);
clearInterval(setTimer);
});
————————————–
とすることで、
一つ目の□は１番目の写真
二つ目の□は２番目の写真
三つ目の□は３番目の写真
に遷移させることができると思います。
スクリプト内の「(listWidth*1)」の部分が移動させる距離になるので
0が1番目となり、その後も表示させる番号-1の数値を入れることで
該当箇所に移動させることができます。
少々荒削りなやり方になってしまいますが
ひとまずこちらでお試しください。
よろしくお願いします。
BlackFlag 様。
早々にご教授いただいていたのに、ご報告が遅くなって申し訳ございません！
ご教授いただいた通り、の中の要素（img）にボーダーの設定をしたら
空白なくループする事が出来ました！
ありがとうございました！
＞yokoさん
ご返信ありがとうございました。
中の要素に指定を切り替えることで
無事に理想どおりの動作が実装できた様で安心致しました。
また何かありましたら
よろしくお願いします。
BlackFlag様。
ご報告及びお礼が遅れて申し訳ございません。
ご教示頂いた通り、無事実装及び動作確認できました。
本件は、卒業制作として作成中のTOP画面に使用したjQueryでして、
グループ内での評判も上々でした。
BlackFlag様のご助力にて素敵なものが制作できましたことを、
この場を借りまして、お礼申し上げます。
本当に、ありがとうございました！
今後もjQueryに挑戦してみようと思います。
＞sera_hkさん
ご返信ありがとうございました！
無事に理想していた動作が実装できたようで安心致しました。
卒業制作としてWebサイトを作成されていたんですね。
グループ内でも好評だったようでなによりです。
jQueryを使うと手軽にさまざまなUIや演出を実装できるので
これからもいろいろ試してみてください。
また何かありましたらご連絡くださいませ。
今後ともよろしくお願いします。
こんにちわ。以前のコメントのなかで、
「ナビゲーションボタンを組み込む方法について」を参考に作らせていただきました。
ずっと探していいたものだったので、大変助かりました！
希望通りに動くようになり、とてもう嬉しいです。
ただ、、、ひとつさらにお願いがあります。。。もしよろしければご教授ください。
指定の画像の位置にスクロールしたら、スライドの動きが止まってしまうのですが、
これをスクロールし続けるにするには、どうしたらよいでしょうか？
スクリプトをどのように改良したらよいか、教えてくださるととても嬉しいです。
よろしくお願いします！
何度もすみません＞＜
もうひとつだけ、、、
「最後の画像までスクロールしたら、スクロールを止める」場合には、
どうしたら良いでしょうか？
＞minminさん
コメントありがとうございます。
ご質問いただきましたナビゲーションボタンを設置しての
スライドをストップさせない件についてですが、
コメント内で記載していたスクリプトに追記する形になりますが
————————————————————
$(‘.num1’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*0) + ‘px’},1000,’linear’,function(){timerLeft();});
clearInterval(setTimer);
});
$(‘.num2’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*1) + ‘px’},1000,’linear’,function(){timerLeft();});
clearInterval(setTimer);
});
$(‘.num3’).click(function(){
$(‘#loopslider_wrap’).stop().animate({left:’-‘ + (listWidth*2) + ‘px’},1000,’linear’,function(){timerLeft();});
clearInterval(setTimer);
});
————————————————————
この様にアニメーション完了後に
再度timer動作を再生させることで可能かと思われます。
最後の画像までスクロールしたらストップさせるのは
いろいろ試してみましたが、
このスクリプトではちょっと難しいかと思っています。。。
よろしくお願いします。
ピンバック: ふくらむ-ブログ
素敵なスクリプト作成・公開ありがとうございます。
拝見させて頂きましたが私の探してた理想に近いスライダーです。
ひとつ質問なのですが
左右の矢印をクリックしている間は
画像の左右のスクロールが早くなるよう設定することはできるのでしょうか。
お忙しいところ恐れ入りますが、ご返答頂けますと幸いです。
＞じゅんさん
コメントありがとうございます。
このスライダースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました
矢印にマウスオーバーすることでのスクロールスピード調整ですが
すみませんが現状のスクリプトだと構成的に少々難しく思っております。。。
またその辺りを改修したスクリプトも用意でき次第
ここで紹介させていただきたいと思います。
よろしくお願いします。
こんにちは。
最近、JSを勉強し始めている、こまどりと申します。
前回の無限ループを自分でいじってみて、
右と左の矢印にhoverすると、その方向に動くようにしてみよう。
としたのですが、うまく動かず、悩んでいたらこちらのページを見つけました！
自分で動かしてみた時の問題点が二つあり、
(今回のものではなく前回の無限ループをいじってみたのですが、)
・25000m秒たつと左右に動き出したり、極端に動きが遅くなったりと、挙動がおかしくなる。
・写真を右方向(→)に動かす時、画像が表示されてない。(prependToを使ってリストを追加しようとしたのですが、
追加されず…)
という問題点が起きてしまいました・・・
左の矢印には以下を適用させています。(右もほぼ同様でleftをrightにかえ、5行目は「left:’-‘ + (loopWidth) + ‘px’」としています。
$(‘#cursol .left’).hover(function(){
Sliderleft();
function Sliderleft(){
$(‘#loopwrap’).stop().animate({
left:’-‘ + (loopWidth) + ‘px’
}, 25000, ‘linear’);
setTimeout(function(){
Sliderleft();
}, 25000);
};
$(‘#loopwrap ul’).clone().appendTo(‘#loopwrap’);
}, function(){
$(‘#loopwrap’).stop();
});
これが＜＞
の左矢印に適用されています。
これ以外の部分は(CSSの変更や、変数の定義の部分など)は手を加えていません。
長くなってしまいすみません。
説明もわかりにくいと思いますが、ご返答をいただけると嬉しいです。
＞こまどりさん
コメントありがとうございます。
スライダースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
申し訳ありませんがちょっと状況が把握しずらいのが現状です。。
実装されたページなど確認させていただけるものがあれば
お知らせいただけると幸いです。
よろしくお願いします。
はじめまして。
js素人です。この動きを使用したいのですがsizeの変更がうまくできません。
幅681
高さ351
の画像を使用して動かしたいのですが・・・
もしよろしければサンプル作って頂けないでしょうか。
よろしくお願い致します。
＞ゆうじさん
コメントありがとうございます。
このスライダースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました681×351サイズでのスライダーですが
サイズ変更に関してはスクリプトは一切変更せずに
HTMLソース上とCSSのみで可能となっております。
参考までに681×351サイズでのサンプルも用意しましたので
下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStop681.zip
ご確認よろしくお願いします。
サンプルありがとうございました。まさか本当にサンプルを作っていただけるとは思っておりませんでした。（笑）すっごく助かりました。あなた様のことを神様と呼ばせて頂きます。
ところで神様もう一点質問なのですが、作って頂いたサンプルのスライダー部分の幅を変更するのはどうすればよいでしょうか？1020の幅の間で画像が回っていく形にしたいのですが。
ご指導よろしくお願いします。
＞ゆうじさん
サンプルのご確認ありがとうございます。
全然、神様と呼ばれるような器ではありませんが、、、
ご質問頂きました幅の変更については、
サンプルファイル内にある「common.css」に書かれている
「#loopslider」の「width」の値を「1020px」に書き換えることで
幅を変えることができます。
————————————
#loopslider {
margin: 0 auto;
width: 1020px;
・
・
・
・
————————————
お試しください。
よろしくお願いします。
こんにちは、また教えてください。
１つの画面で複数のループスライダーを使っているんですが、スライダーを右から左で始まるものと左から右に始まるものにしたいのですが、どうすればいいでしょうか？
よろしくお願い致します。
＞ゆうじさん
こんばんは。
ご質問いただいた件ですが、複数設置については
この記事のコメントの中でサンプルを紹介しているので
そちらを参考にしていただければと思います。
動作を逆でスタートさせるには
記事内で紹介しているスクリプトの34行目
——————————-
timerLeft();
——————————-
の１行を
——————————-
$(‘#loopslider_wrap’).css({left:’-1px’});
timerRight();
——————————-
と変更することで実現できるかと思います。
お試しください。
よろしくお願いします。
はじめまして、hiroと申します。
理想の形のスライダーを探し求めていたらここにたどり着きました。
なかなかないのでありがとうございます。
複数設置の件なんですけど、やはり上に書かれているように複数のjsを
用意する感じになってしまうんですね。
でも解決しましたので使わせて頂きます。
もしかしたら、何か質問することがあるかもしれませんが
よろしくお願いします！！
＞hiroさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいているようで
嬉しく思っております。
複数設置については
———————————————–
・jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法
http://black-flag.net/jquery/20110707-3305.html
———————————————–
こちらのパターンでは用意してありますが
当記事の方ではまだ用意できておりません。。。
またサンプルの準備が出来ましたら
ここで紹介させていただきますね。
よろしくお願いします。
はじめまして
この自動ループスクロールにドラッグでスクロール可能で
ドラッグした後も自動再生が継続される様にできますか？
イメージ的には
・自動スクロールが再生されている
・ドラッグでスクロールさせる
・スクロールさせた後またその位置から自動再生です
よろしくお願いいたします
＞dineさん
コメントありがとうございます。
ご質問いただきましたドラッグでの操作についてですが
現状のスクリプト構成では実現は難しいかと思います。。。
けれど、その様な仕様のスライダーもこの先いろいろ使えそうなので
実装スクリプトが出来上がりましたら
またここで紹介させていただこうかと思っております。
よろしくお願いします。
初めまして。勉強で連合町内会のホームページを作成しています。どうしても、広告というか自分の気に入ったお店のバナ－をページの一番下で自動スクロールさせたいと思い２日間検索して「loopslider」にたどりつきました。まさに、欲しかったものです。
しかし、設定し実行したら画像のスクロール表示始めますが、最後の画像が表示されてから、最初の画像が表示される迄空白があります。繋がって表示されません。
htmlは下記のように記述してあります。
＜bottom2_2＞
＜div id=”loopslider”＞
＜ul＞
＜li＞＜a href=”#”＞＜img src=”image/photo01.jpg” width=”125″ height=”100″ alt=”” /＞＜/a＞＜/li＞
＜li＞＜a href=”#”＞＜img src=”image/photo02.jpg” width=”125″ height=”100″ alt=”” /＞＜/a＞＜/li＞
＜li＞＜a href=”#”＞＜img src=”image/photo03.jpg” width=”125″ height=”100″ alt=”” /＞＜/a＞＜/li＞
＜/ul＞
＜/div＞
JQueryとcssについてはダウンロードさせて頂いたものを使用しているつもりなのですが…
年末でご多忙中とは思いますが教えて下さい。
こんにちは。
ずぶの素人なんですが商品ページにスライドショーを組み込みたくて色々探してこちらにたどり着きました。
とても理想的なスライドなんでぜひと思って試行錯誤しております。
試しに、サイズと画像を変更してやってみたのですが、サイズのところはCSSの方をいじって問題なくやれたのですが、画像がうまく表示されません。どこかスクリプトを変更しなければならないのか、それともIEの問題なのかわからない状況です。
ご教示頂ければ幸いです。また、その画像にリンクを張る場合はHTMLのどの部分を変更すればいいのかを教えていただければと思います。
本当に素人質問で申し訳ございません。よろしくお願いします。
＞ウラチャンさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで嬉しく思っています。
ご質問いただいた件ですが
実際どのような構成で実装されているか
確認できていないので何とも言えないのですが、
想定されることとすれば
ブラウザリセット的なものがされていないのかな？
と感じています。
CSS側で
————————-
#loopslider *{margin:0;padding:0;}
————————-
この様にmargin、paddingの値をクリアしてみてはいかがでしょうか。
お試しください。
よろしくお願いします。
＞MISさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
嬉しく思っています。
ご質問いただいた件についてですが
実際の実装されている状況を確認できていないので何とも言えないのですが、
サイズ変更に関してはHTMLとCSSのみでの制御になっており
スクリプト側では変更するところはありませんので
再度HTMLとCSSの方をご確認ください。
画像に対してのリンクはサンプル上でも＜a＞タグを付けてありますので
「href=”#”」の「#」のところにリンク先を指定していただければ大丈夫かと思います。
よろしくお願いします。
お返事ありがとうございます！！
期待してお待ちしております！！
早々のご返信ありがとうございました。
どうもPCの設定の問題だったみたいでちょっと固まるときはありますが、問題なくweb上でも見れてます。
あと、書き込みしたあとに気づいたのですが、#に入れればいいなんだなと思いリンクを張ることはできました。
また、素敵なページを作るためにちょこちょこ参考にさせていただきます。
ありがとうございました。
こんにちは。
はじめまして、ホームページ作成を勉強しているものです。このページはすごく助けていただいております。
本当に感謝しています。ありがとうございます。
ひとつ質問させていただきます。
ループスライダーを回転させる方法はどうすればいいですか？
８～１０枚ぐらいの写真を風車の様に回転させ、上半分だけ（４枚～５枚）表示したいんです。
説明がわかりにくく申し訳ありませんがよろしくお願いします。
＞gomaさん
コメントありがとうございます。
このスライダースクリプトをお試しいただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
申し訳ありませんが、その様な動作はこのスクリプトからは実現は厳しいかと思っております。
またその様な動作サンプルを作る機会がありましたら
ここで紹介させていただきます。
よろしくお願いします。
こんにちは。先日ライセンスについて問い合わせた者です。
利用させていただき、大変うれしく思っております。
それで、ちょっと困っているのですが、実は以下ページのスクリプトを使おうと思い、
http://pct.unifas.co.jp/%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E7%84%A1%E3%81%97%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%B8%80%E9%83%A8%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-1499/ （ajaxを使ってデータを更新する場合）
http://javascriptist.net/ref_prototype/ajax.updater.html
こちらのループスライダーと同ページに設置したところ、ループが止まってしまいます。
prototype.js が問題のようです。
これは併用は難しいでしょうか？
お答えいただける範囲で結構です。
お手数ですが、宜しくお願いいたします。
返事ありがとうございました。
無理なこと聞いてしまい、すいませんでした。
またよろしくお願いします。
＞warashさん
コメントありがとうございます。
ご質問いただきました件についてですが
jQueryと他のライブラリファイルを併せて使うには
記述方法を少し変える必要があります。
ちょっと古い記事になりますが当ブログ別記事の
————————————————-
・jQueryと他のライブラリの共存方法
http://black-flag.net/jquery/20091202-837.html
————————————————-
こちらを参考にしてみてください。
よろしくお願いします。
はじめまして、パソコン・スマホのサイトを作成してるものですが、画像スライドショーを探しておりまして、
やっとたどり着きまして、ホットしております。
しかし、このページで公開されてるスライダーの下記変更するにはどうしたらよいのでしょうか？
ご教授頂ければ有り難いです。
１．このページのスライダー複数設置。
２．そして上記1のスライダーのスピードを変更
３．スマホにも使用したいのですが、可能でしょうか？
以上です。よろしくお願い致します。
はじめまして。
こちらのスライドショーを大変ありがたく使わせて頂いております。
２点質問があります。
・枠をwidth1000px、height80pxにサイズ変更するとスライドさせる画像(80×80)の位置がずれて、
下の部分が切れてしまいます。おそらく余白が原因だとは思うのですが、どこの部分を直せば良いで
しょうか？（隣り合わせの画像は余白を残したいです。）
・スライドの速度をもう少し落としたいのですが、可能ですか？
お手数ですが、ご回答よろしくお願い致します。
＞miyabiさん
コメントありがとうございます。
このスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
このスクリプトではまだ複数設置を可能としてものは用意しておりませんが
近い動作のもので
——————————————————
・jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法
http://black-flag.net/jquery/20110707-3305.html#comment-12124
——————————————————
こちらのパターンでは複数設置のデータも用意してあります。
スライドスピードは変更できず、
スマホでは動作確認していないのですが
jQueryのアニメーションが滑らかに動作しないのではないかと思っております。。
またその様なパターンも用意できましたら
ここで紹介させていただきます。
よろしくお願いします。
＞sakimさん
コメントありがとうございます。
スライダースクリプトをご活用いただいている様で嬉しく思っております。
ご質問いただきました内容についてですが
実装されている構成を確認できていないので何ともいえませんが
＜li＞にはpaddingやmarginを設定すると計算が狂ってしまうので
＜li＞のwidthとheightには余白を含めた値を設定して
その中に入る要素に対してpaddingやmarginを設定して位置調整をする必要があります。
スライドの速度については記事内に書いてある通り
変更することはちょっと難しい仕様になっております。
またそれらを実現できるパターンが用意できましたら
ここで紹介させていただきます。
よろしくお願いします。
いつも利用させていただいています。親切な内容で大変ありがたいです。
さて、ここに書き込みがありました、左から右への動きがうまくいきません。まるっと変更してみたのですが…よろしくお願いします。
＞yamauraさん
コメントありがとうございます。
ご質問いただきました件についてですが
前のコメントでも回答している内容になりますが
動作を逆でスタートさせるには
記事内で紹介しているスクリプトの34行目
——————–
timerLeft();
——————–
の１行を
——————–
$(‘#loopslider_wrap’).css({left:’-1px’});
timerRight();
——————–
と変更することで実現できるかと思います。
上記スクリプトをコピペする際に
シングルクォーテーションがきちんと半角になっているか
確認しながらお試しください。
よろしくお願いします。
はじめまして。
素敵なスライダーを公開して下さって感謝しております！
さっそく組み込み試させていただいております。
現在、windows7(ie9)とxp(ie8)のパソコンで動作確認をしています。
どちらも当初は正常に動作をしていますが、そのサイトを開いて５分か１０分後に
オンマウス状態で５秒後にクリックせずマウスアウトすると画面が固まってしまいます。
windows7(ie9)しばらくすると「更新」とたのと同じように復帰しますが、
xp(ie8)の方は
「このページのスクリプトが、Internet Explorerの実行速度を遅くしています。
スクリプトを実行し続けると、コンピューターが反応しなくなる可能性があります。
yes / No 」 とのメッセージが表示して
Noを選択するとしばらくして「更新」とたのと同じように再起します。
しばらく放置してオンマウス後マウスアウトするとブラウザ「応答なし」になり
強制終了。
変更点は、ダウンロード後スタイルは１本化して、画面とファイルサイズに応じて
width heightの値は変更しています。両方のスクリプトは別々のiframe内で実行しています。
jqueryを利用した別のスクリプトも１本動いている関係で
別のディレクトリー内にjquery-1.8.3.min.jsを格納しているため
jquery-1.8.3.min.jsをリンクするようにしています。
上記以外に個々に変更する必要な箇所があるのでしょうか?
この現象は、私のパソコン環境によるものなのでしょうか?
なにぶん素人なもので判断しかねています。
ご教示頂けますようお願い致します。
＞maimuさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました現象についてですが
こちらではその様な動作が確認できていないのですが
当記事からダウンロードできるサンプルファイルを
そのままサーバアップしていただいても同じ現象は起こるのでしょうか。
もしサンプルファイルでは起こらなかった場合は
その他の部分で原因があるかと考えることもできますので
一度ご確認いただけますと幸いです。
よろしくお願いします。
ご返信を頂きまして有り難うございます。
早速ご教示頂きました通り、
ダウンロードをした状態のものをサーバーにアップしようと思いましたが
まずは、貴サイト(このページ)をxp ie8のパソコンで表示した状態を１５分ほど放置後
マウスを画像にのせて、クリックせず１０秒放置後、マウスアウトすると
下記の様なメッセージがポップアップしました。
「このページのスクリプトが、Internet Explorerの実行速度を遅くしています。
スクリプトを実行し続けると、コンピューターが反応しなくなる可能性があります。
yes / No 」 とのメッセージが表示致しました。
どうも私のパソコン環境が原因と考えられます。
この度は、オンマウスでスライドを止めることをしなければ、症状が出ないため
旧？バージョンのスクリプトを利用させて頂くことに致しました。
わざわざご返信を頂きまして有り難うございました。
これからも素晴らしいスクリプトをお願い致します。
楽しみにしています。
有り難うございました。
動作を逆でスタートさせたいが上手くいかないという問い合わせをさせていただいたものです。ご指摘の通り、シングルクォーテーションが半角になっていませんでした。コピペでそのような不具合が起きるという事を知りませんでした…。とても低レベルなミスで、お恥ずかしいです。そんなものにもご丁寧にお返事頂きまして、ありがとうございます。
こちらで公開されているスクリプトで初めてjQueryを実装出来るようになって、webの楽しさを知りました。感謝してもしきれません。ありがとうございました。
＞yamauraさん
ご連絡ありがとうございます。
無事に理想とした動作が実装できたようで安心致しました。
jQueryを初めて実装したのが当ブログからとのこと、
その様なお言葉を戴けると
とても嬉しく光栄に思います。
他にもjQueryでの動作をいろいろと紹介しておりますので
あれこれ試して遊んでみていただければ幸いです。
よろしくお願いします。
こんにちは、
いつも、ホームページを拝見させて頂いてます。
弊社のホームページをリニューアルをしたいのですが、案がなかなかまとまらなくて思案中です。
トップページに最近、流行の画像スライドショーを挿入したくて検索していたらBlackFlag 様の画像スライドショーが
見つかり、いろいろと試してもらってます。
「通りすがり | 2012.03.07 8:33 様」の質問で「１ページ内で、このスライダーを３つ動作させたパターン」ができるようになり気に入ってます。
そこで、同ページ内に、この画像スライダーの下に、「jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法」で２５個の画像をランダムに挿入したいのですが、画像が縦一列にしかできません。
何卒、ご教授をよろしくお願いします。
＞mohanさん
コメントありがとうございます。
当ブログのスクリプトをいろいろとお試しいただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
試しに2つのスクリプトをそのまま組み合わせてみたところ
仰られているような現象は起こりませんでした。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStopDualRandomLoad.zip
実装されている環境内の
他の箇所で設定されているJSもしくはCSSが
影響してしまっていることも考えられますので
一度そちらの方、ご確認いただけますでしょうか。
よろしくお願いします。
BlackFlag 様
お忙しい中、ご返信ありがとうございました。
早速、動作確認をしましたらバッチリです。
2週間ばかり、自分でいろいろと試してやってましたができなくて、やっと、これで前に進みます。
今回は、本当に有難うございました。
今後の、BlackFlag 様のますますのご検討をお祈りします。
スライダー系のプログラムを探していてこのサイトにたどり着きました
非常に使いやすく、またわかりやすく大変感動しましたｗ
さてさて、私のサイトに組み込んでみたのですが（背景の青空の部分です）
トップページは思い通りに動くのですが、なぜか2Ｐ目以降が動かないのです
※サイト自体はxoopsで作成しています
ご教授願えますでしょうか
はじめまして
Javascript初心者ですが画像スクロールを実装してみたく、サンプルコードで勉強させてもらっています。
簡単な質問かもしれませんが画像サイズを高さ160に変更した場合、高さ80の位置に左右の＜＞マークを表示させたいのですがどうすれば良いでしょうか？
教えて頂けると助かります。
よろしくお願いします。
＞ゲルーザさん
コメントありがとうございます。
このコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
確認させていただいたところ
こちらの環境ではきちんと動作しているようでした。
動作していないOS環境やブラウザ環境等についても
お知らせいただけると幸いです。
ご確認よろしくお願いします。
＞hirotoさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
左右のボタンの位置やサイズはCSSで指定しておりますので
「#loopslider #loopleft」「#loopslider #loopright」の
セレクタ内で指定している「top」の値を
80pxにすることで実現可能かと思っております。
お試しください。
よろしくお願いします。
BlackFlag様
返信ありがとうございます。
教えて頂いたCSSの「line-height」の値を160に
変更することで思い通りの表示になりました。
ありがとうございました。
初めまして
ループスライダーを使わせていただいております。
すいませんSSLだと動かないのですが、何か対策方法はございますでしょうか？
SSLでなければ動きます。
以上よろしくお願いします。
＞koutabi-ruさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらくjQueryライブラリファイルをhttpで読んでいる影響なのではないでしょうか。
jQueryを読み込む際のGoogleコードのURLをhttpsにするか
jQueryファイルはローカルに落としたもので使用してみてください。
お試しください。
よろしくお願いします。
いつも拝見し利用させていただいてます。
質問者さんの中でありました上下に動かす方法を使用しています。
マウスを乗せると止まり、離すとすぐにまたスライドするようにするにはどうすればいいでしょうか？
JSを見たところstopのあたりを見ても数字がなかったので変更のやり方がわからず質問させていただきました。
よろしくお願いいたします。
http://black-flag.net/css/20101209-2155.html
上記のページにある拡大のやり方も一緒にすると最後の「CSS3 HoverAnimation」の部分を入れるだけで思った動きができました。
自己解決してしまいました…申し訳ありません。
また利用させていただきます。ありがとうございました＾＾
すばらしいサンプルを公開していただきありがとうございます。
こちらのサンプルを参考にさせていただいて、自分好みに応用させていただきました。
別の方がコメントされていました、ホバー時のスクロールスピード変更についてですが、loopleftとlooprightのhoverにfunctionを1つ増やし、マウスオン時にmoveIntervalを大きくし、マウスアウト時に1に戻すことでできるのではないかと思います。
ただし私の場合この実装をすると、1週目の1枚目の左端のループがつながらないことがよくあります（つながることもあります）。
具体的には以下のように変更しました。
$(‘#loopright’).hover(function(){
moveInterval = 6;
$(‘#loopslider_wrap’).stop();
clearInterval(setTimer);
timerRight();
},
function(){
moveInterval = 1;
$(‘#loopslider_wrap’).stop();
clearInterval(setTimer);
timerRight();
});
もし何か解りましたらどうかご教授願います。
＞きらきらキラーさん
コメントありがとうございます。
当記事のループスライダーをご活用いただいている様で
嬉しく思っております。
マウスオーバーでスピードを変化させる方法について
いろいろとご調整いただきありがとうございます。
記述いただいた動作を元にこちらで再調整したサンプルを用意してみました。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverEarly/
マウスオーバーで「moveInterval」の値を変えることに加えて
記事内のスクリプトで言う45行目と76行目の
スライド位置をリセットする箇所を調整してあります。
参考までに必要であれば下記よりサンプルデータ一式を
ダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverEarly.zip
また何かありましたらご連絡くださいませ。
よろしくお願いします。
BlackFlag様
スクリプトを修正していただき誠にありがとうございます。
わずかな修正で思い通りに動作いたしました。
ホームページ初心者なもので非常に感謝しております。
初めまして、CSSやJS初心者で勉強中のものです!!
いつも拝見させて頂き、勉強させて頂いております。
この度こちらのスライダーを下記ページのスライダーと合わせて同じページで練習をしていたところ、動作が不安定となりどちらか1つは動くのですが、両方同時には動作しません。
http://black-flag.net/jquery/20130514-4588.html
CSS等の重複部分は直しましたが、それでもダメでした。
多分JSが干渉しているのではと考えたのですが、JSの知識が全くないと言っていいほど乏しい為、ご教授頂けましたら幸いです。
ちなみにこのページのスライダーは下記ページと同じものを使用しております。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverEarly/
一通りこれまでの他の質問はチェック致しましたが、該当するものを見つけることが出来ませんでしたので、お手数ですが、宜しくお願い致します。
＞なかさん
コメントありがとうございます。
当ブログのスクリプトをいろいろとご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
2つのスクリプト内で「setTimer」の変数名が被っている影響だと思われますので
どちらかのスクリプト内に記載している「setTimer」をすべて「setTimer2」などの
別の名前に変更することで正常に動作すると思います。
お試しください。
よろしくお願いします。
ご返答有難う御座います。
さっそくお教え頂いたように変更してみたところ、正常に動作致しました!!
有難う御座います。
綺麗に動いてとても嬉しいです(*´∀｀*)
これからも活用させて頂きたいと思います。
本当に有難う御座いました!!
はじめまして。
jqueryの勉強の一環でサンプルを利用させて頂いております。
有用な情報を公開して頂き、ありがとうございます！！
ループスライドを実行していると、
時間経過に応じてメモリの消費量がどんどん肥大してしまうのですが、
なんとか対応できないものでしょうか。。。
下記サンプルを実行しても同様の事象が発生します。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStop681.zip
もし、原因等ご存じでしたら、ご教授頂けないでしょうか？
お手数をお掛けしますが、よろしくお願い致します。
＞かみさん
コメントありがとうございます。
当記事のループスライダースクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
このスクリプト自体が3年ほど前に作成したものなので
いろいろと改善すべき点はあるかと思っています。。
改訂版ができましたら
またここで紹介させていただきます。
よろしくお願いします。
はじめまして。
最近この記事を見つけて使わせていただいてます。
かなり経っているのでコメントを残すのも気後れしてましたが、お時間あれば教えてください。
画像が既に表示されている状態からスライドし始めますが、開始位置を決めることはできますか？
右端から出てくる、またはその間からスタートはじめたりできるよう調整したいです。
＞ロティさん
コメントありがとうございます。
当記事のループスライダースクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
このスクリプトを使って不可能ではないとは思いますが
もともとそのような動きの想定をしていないので
ちょっと直せばできる、というわけにもいかなそうです。
またそのようなスライダーができましたら
紹介させていただきます。
よろしくお願いします。