###前提・実現したいこと
JQueryのslickプラグインを使って断続的ではない(継続して流れていく)
スライダーを作っています。
サンプルをこちらに置きました。
https://jsfiddle.net/k53sncv2/20/
slickにオンマウスで停止するオプションはあるのですが、
即停止になりません。
例えば左に流れていくスライダーの場合、
次の要素が左端に来るまで止まらない仕様です。
他のプラグインも考えたのですが、
"オプション設定で簡単に"複数行対応できて
というプラグインがなかなかありません。
また、複数行のスライダー対応が自分の技術では
難しく何とかslickで対応できたらと思っています。
###試したこと
①slickにsimplyscroll(オンマウスで即停止するので)
を組み合わせてみましたが、レイアウトがめっちゃくずれました。
//一覧のランダム処理 var arr = []; $(".shuffle li").each(function() { arr.push($(this).html()); }); arr.sort(function() { return Math.random() - Math.random(); }); $(".shuffle").empty(); for(i=0; i < arr.length; i++) { $(".shuffle").append('<li>' + arr[i] + '</li>'); } //一覧スライド $('#slide ul').slick({ arrows : false, autoplay : true, autoplaySpeed : 0, cssEase : 'linear', speed : 4000, rows : 5, slidesToShow : 5, slidesToScroll : 1 }); $('#slideIg ul').simplyScroll({ });
②jqueryのポーズ?を入れて試行してみました。
$('#slide ul li').hover(function() { $('#slide ul li').pause(); }, function() { $('#slide ul li').resume(); });
や
$('#slide ul li').hover(function() { $('.slick-track').pause(); }, function() { $('.slick-track').resume(); });
なども試しました。
その他、hoverメソッドなどもやってみたのですが、
できませんでした。
slickでできるのが一番ですが、最悪複数行対応できるスライダーもしくはやり方などを
教えていただけませんでしょうか。
皆さま、よろしくお願い致します。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/05 09:36
2017/12/05 10:27
2017/12/05 11:11