質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

スライダープラグインのslickについて質問です

受付中

回答 5

投稿 編集

  • 評価
  • クリップ 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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/26 23:15

    コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

  • kei344

    2016/05/27 16:56

    修正ありがとうございます。

    キャンセル

回答 5

+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要素自身で処理したほうが良いかもしれません。

試してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/27 11:07

    Re: kei334さん,manabufukaiさん

    ありがとうございます
    2の問題は.slick-dots liに新しいcssを適用する事で解決しました

    1の問題なのですがマウスホイールをしたら
    ・slickNext
    ・slickPrev
    この要素をクリックした時と同じ処理を与えるということですか?

    キャンセル

  • 2016/05/27 11:19 編集

    To: manabufukai
    > ざっと見た感じ、
    コメントではなく回答に書かれてはいかがでしょう。(逸れてしまう&もったいない)

    To: hanasan
    > この要素をクリックした時と同じ処理を与える
    slick自体にメソッド(関数)が用意されています。
    また、質問文に対する修正依頼は読んで頂けましたか?

    キャンセル

  • 2016/06/01 00:25

    Re: kei344さん
    すみません、時間も時間だったので手を抜いてしまいました。。
    ちょっと忙しくて顔を出せなかったうちに解決してくださっていたようで…ありがとうございます。

    キャンセル

0

To: kei334さん
失礼しました
質問内容を修正しました

スクロールの件ですが

$(".test").mousewheel(function(en, delta, deltaX, deltaY) {
    $(".test").text(deltaY);
});


このようにすると「.test」でスクロールした時に番号を取得できました

これを利用してスライダーを動かしたいのですが、
slickNextメソッドをどうのように指定したらいいのかわかりません

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/27 16:55

    あ、「コメントではなく回答に書かれてはいかがでしょう。」はmanabufukaiさんのコメントのことです。新たに試したことなどは回答でもいいですが、質問文に追記していくことがわかりやすいと思います。

    キャンセル

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で無効にしていたがなぜか有効になっている

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/27 21:09

    公式からダウンロードしたファイルに入っているサンプルで同じコードを書いた状態で、IE11/Firefox/Chromeで動作を確認できました。

    下記のようにしていますか?また、HTMLに問題は無いですか?

    $(document).on('ready', function() {
    /* ここの間にコードを挟む */

    /* ここの間にコードを挟む */
    });

    キャンセル

  • 2016/05/27 21:19

    すみません挟むとは
    $(document).on('ready', function() {
    $( '.variable' ).slick( {
    dots: true
    , infinite: false
    , variableWidth: true
    , draggable:false
    } ).on( 'mousewheel', function( event, delta, deltaX, deltaY) {
    event.preventDefault();
    if ( event.deltaY < 0 ) {
    console.log("上");
    $( this ).slick("slickNext");
    } else {
    console.log("下");
    $( this ).slick("slickPrev");
    }
    } );
    });
    ですか?変化はないです

    キャンセル

  • 2016/05/27 21:28

    > event, delta, deltaX, deltaY
    そう書いても要素を受け取れるわけではありません。
    if の前で console.log( event ); をして内容を見てください。

    スライダー自体は動いているんですね?
    ブラウザはSafariじゃないですよね?
    もしそうであればお手上げです。HTMLの組み方に問題が有るか、閲覧環境に問題が有るかもしれませんね。

    キャンセル

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%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る