スライダープラグインのslickについて質問です
- 評価
- クリップ 0
- VIEW 2,920

退会済みユーザー
前提・実現したいこと
スライダープラグインの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についてはまったくわからず申し訳ありませんがよろしくお願いします
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
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
要素自身で処理したほうが良いかもしれません。
試してみてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
To: kei334さん
失礼しました
質問内容を修正しました
スクロールの件ですが
$(".test").mousewheel(function(en, delta, deltaX, deltaY) {
$(".test").text(deltaY);
});
このようにすると「.test」でスクロールした時に番号を取得できました
これを利用してスライダーを動かしたいのですが、
slickNextメソッドをどうのように指定したらいいのかわかりません
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
manabufukaiさんの書かれているのはこういうことかと。
<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
event.preventDefault();
if ( event.deltaY < 0 ) {
$( this ).slickNext();
} else {
$( this ).slickPrev();
}
} ); // 未テストです
</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
追記:
<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$( '.variable' ).slick( {
dots: true
, infinite: false
, variableWidth: true
, draggable:false
} ).on( 'mousewheel', function( event ) {
event.preventDefault();
if ( event.deltaY < 0 ) {
$( this ).slick( 'slickNext' );
} else {
$( this ).slick( 'slickPrev' );
}
} ); // テストしました問題なく動きます
</script>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
ありがとうございます
自分なりに以下のコードを試したのですが
<script>
$( '.slick-wrap' ).slick().on( 'mousewheel', function( event ) {
event.preventDefault();
if ( event.deltaY < 0 ) {
$( this ).slickNext();
} else {
$( this ).slickPrev();
}
} ); // 未テストです
</script>
うまく動かなかったです
【動かない現象】
・マウススクロールに反応しない
・ドラッグしてスライダーを動かすのをoptionで無効にしていたがなぜか有効になっている
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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より~の記述で動きました
ありがとうございました
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/05/26 23:15
コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344
2016/05/27 16:56
修正ありがとうございます。