###前提・実現したいこと
スライダープラグインのslickについて質問です
1、スライダー上でマウスホイールを上下に動かしたらスライダーが一つ動くようにしたい
2、.slick-dots liにjquery でアニメーションをつけたい
<div class="block">!</div> <script> $(".block").hover(function(){ $(this).animate({ width: "200px", }, 1500 ); }); </script>
例えば上のコードでclass="block"にホバーしたらサイズが変わりますが、
<script> $(".slick-dots li").hover(function(){ $(this).animate({ width: "200px", }, 1500 ); }); </script>
このコードを入れても".slick-dots li"はホバー時に変化しません
1についてはまったくわからず申し訳ありませんがよろしくお願いします
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/27 07:56
回答5件
0
1.の方は分からないので2.の方だけ。
まず、1点確認ですが、アニメーションでサイズを変えようとしているのは
slick.jsのデフォルトのdotsですよね?
だとすると.slick-dots li
に対してアニメーションさせようとしても ● のサイズは変わりません。
Chromeの開発者ツール等で確認すれば分かることですが、slick.jsのdotsの ● は、
.slick-dots li button::before
に設定されたフォントです。
従って、jQueryやCSS3transition等でサイズ変更するアニメーションを適用したいならば、
まずフォントを使用する方式をやめ、.slick-dots li button::before
もしくはその親の
.slick-dots li button
自身にオリジナルのスタイルを適用した上で、
そちらにアニメーションを適用する必要があると思われます。
うろ覚えなのでアレですが、::before
だとそもそもアニメーション処理出来なかったかもしれないので、
その場合は::before
は非表示にして、button
要素自身で処理したほうが良いかもしれません。
試してみてください。
投稿2016/05/26 16:23
総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/26 16:41
2016/05/26 17:16 編集
2016/05/26 17:11
2016/05/26 17:16
退会済みユーザー
2016/05/27 02:07
2016/05/27 02:20 編集
2016/05/31 15:25
0
$(document).on('ready', function() { $( '.variable' ).slick( { dots: true , infinite: false , variableWidth: true , draggable:false } ).on( 'mousewheel', function( event, delta, deltaX, deltaY) { event.preventDefault(); console.log( event ); if (deltaY < 0 ) { //console.log("上"); $( this ).slick("slickNext"); } else { //console.log("下"); $( this ).slick("slickPrev"); } } ); });
if (deltaY < 0 )の部分をdeltaYより~の記述で動きました
ありがとうございました
投稿2016/05/30 05:43
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ありがとうございます
自分なりに以下のコードを試したのですが
<script> $( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) { event.preventDefault(); if ( event.deltaY < 0 ) { $( this ).slickNext(); } else { $( this ).slickPrev(); } } ); // 未テストです </script>
うまく動かなかったです
【動かない現象】
・マウススクロールに反応しない
・ドラッグしてスライダーを動かすのをoptionで無効にしていたがなぜか有効になっている
投稿2016/05/27 08:29
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/27 08:38
退会済みユーザー
2016/05/27 11:18 編集
2016/05/27 11:18
退会済みユーザー
2016/05/27 11:22
2016/05/27 11:23
退会済みユーザー
2016/05/27 11:36
2016/05/27 11:48
退会済みユーザー
2016/05/27 12:00
2016/05/27 12:09
退会済みユーザー
2016/05/27 12:19
2016/05/27 12:28
0
manabufukaiさんの書かれているのはこういうことかと。
HTML
1<script src="js/mousewheel.js"></script> 2<script src="slick/slick.min.js" type="text/javascript"></script> 3<script> 4$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) { 5 event.preventDefault(); 6 if ( event.deltaY < 0 ) { 7 $( this ).slickNext(); 8 } else { 9 $( this ).slickPrev(); 10 } 11} ); // 未テストです 12</script>
【Web Developer Blog: slick slider horizontal scroll with mouse wheel js】
http://blog.thilankad.com/2016/04/slick-slider-horizontal-scroll-with.html
【Feature Request: Mouse wheel support ・ Issue #122 ・ kenwheeler/slick ・ GitHub】
https://github.com/kenwheeler/slick/issues/122
ちなみに jQuery Mouse Wheel Plugin は Safari9 のバグのため Safari ではうまく動かないかもしれません。
【GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.】
https://github.com/jquery/jquery-mousewheel
追記:
HTML
1<script src="js/mousewheel.js"></script> 2<script src="slick/slick.min.js" type="text/javascript"></script> 3<script> 4$( '.variable' ).slick( { 5 dots: true 6 , infinite: false 7 , variableWidth: true 8 , draggable:false 9} ).on( 'mousewheel', function( event ) { 10 event.preventDefault(); 11 if ( event.deltaY < 0 ) { 12 $( this ).slick( 'slickNext' ); 13 } else { 14 $( this ).slick( 'slickPrev' ); 15 } 16} ); // テストしました問題なく動きます 17</script>
投稿2016/05/27 08:06
編集2016/05/27 11:53総合スコア69364
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
To: kei334さん
失礼しました
質問内容を修正しました
スクロールの件ですが
$(".test").mousewheel(function(en, delta, deltaX, deltaY) { $(".test").text(deltaY); });
このようにすると「.test」でスクロールした時に番号を取得できました
これを利用してスライダーを動かしたいのですが、
slickNextメソッドをどうのように指定したらいいのかわかりません
投稿2016/05/27 07:50
退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。