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

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

ただいまの
回答率

87.49%

Slickでカルーセルをクリックしたらautoplayを止めたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,279

score 13

 Slickでカルーセルをクリックしたらautoplayを止めたい

Slickを使用してレスポンシブなスライダーを作っています。
スライダー下部に画像の枚数分付与されるカルーセル「●」をクリックした際に、
autoplayが止まるようにしたいです。
初期表示時はautoplayを実行し、カルーセルをクリックした時にのみautoplayが止まるイメージです。
ul.sliderにてslickのアウターを指定しています。

 発生している問題

●正常(autoplayが止まる)
①safari、961px以上のchrome
②960px以下かつchromeで、一度autoplayが実行され、2枚目のスライドが表示された以降、カルーセルをクリック

●問題(autoplayが止まらない)
①960px以下かつchromeで、ローディングして画面初期表示直後にカルーセルをクリック
②windows版のchromeに限り、960px以下にウィンドウを縮めた状態で、正常①でautoplayを止めた後に別のウィンドウをアクティブにする

$('.slick-dots li').clickortouch(function(){
    $('.slider').slick('slickSetOption', 'autoplay', false, true);
});

 該当のソースコード

$('.slider').slick({
    infinite: true,
    dots: true,
    slidesToShow: 1,
    centerMode: true, 
    centerPadding:'0',
    variableWidth: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1000,
    responsive: [{
        breakpoint: 960,
        settings: {
            variableWidth: false,
        }
    }]
});

$('.slick-dots li').clickortouch(function(){
    $('.slider').slick('slickSetOption', 'autoplay', false, true);
});

 最終的に試したこと

$('.slider').slick({
    infinite: true,
    dots: true,
    slidesToShow: 1,
    centerMode: true, 
    centerPadding:'0',
    variableWidth: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1000,
    waitForAnimate: false
});

$(window).on('load resize', function() {
    var windowWidth = window.innerWidth;

    if (windowWidth < 960) {
        $('.slider').slick('slickSetOption', 'variableWidth', false, true);
    } else {
        $('.slider').slick('slickSetOption', 'variableWidth', true, true);
    }
});

var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
    $('.slick-dots li').clickortouch(function(){
        $('.slider').slick('slickSetOption', 'autoplay', false, true);
    });
} else {
    $(document).on('click', '.slick-dots li button', function() {
        $('.slider').slick('slickPause');
        $('.slider').slick('slickSetOption', 'autoplay', false, true);
    });
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

"slickSetOption"では止まりません。"slickPause"を使ってください。

$('.slider').slick('slickPause');


http://kenwheeler.github.io/slick/

var autoplay = true;
$(document).on('breakpoint', function(event, slick, breakpoint) {
  if (!autoplay) {
    $('.slider').slick('slickPause');
  }
});
$('.slick-dots li').click(function(){
  autoplay = false;
  $('.slider').slick('slickPause');
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/13 13:48

    回答ありがとうございます。
    試した結果、下記の場合にautoplayが止まりませんでした。

    ▼Chrome
     初期表示後に961px以上のウィンドウ幅でautoplayを止め、その後960px以下にウィンドウを縮小する

    961px以上のウィンドウ幅では一時停止ができましたが、その状態のまま960px以下にウィンドウを縮小すると再びautoplayが動き出してしまいます。

    960px以下のウィンドウ幅で初期表示後にautoplayを止めることは可能です。

    一つ気になるのは、console.log($('.slider').slick('slickGetOption','autoplay'))で
    最初のやり方だとautoplay : falseになりますが、ご教示いただいたやり方ではautoplay : trueのままです。

    キャンセル

  • 2018/11/13 14:23

    slickPauseは内部で動いているsetIntervalをクリアする唯一の方法なので変えられませんが、responsiveがあるとウィンドウ幅で初期化処理が走って再度有効にされてしまうようです。
    対策を追記するので試してみてください。

    キャンセル

  • 2018/11/13 15:17

    再度ありがとうございます。このコードで解決しました。
    breakpointイベントがあったんですね。

    > responsiveがあるとウィンドウ幅で初期化処理が走って再度有効にされてしまうようです。
    ということは、responsiveがあると、その幅に到達した際に初期化処理でsetIntervalが再設定されてしまうということですかね?

    ChoromeでもAndroidでもSafariでも動いたので助かりました;;

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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