web-dev-qa-db-ja.com

滑らかなカルーセルはサイズ変更されません

Wordpress開発中のサイトでSlick.jsカルーセルを使用しています。ブラウザウィンドウのサイズを変更すると、カルーセルが適合せず、水平スクロールバーが表示されます。スリックを開始しないでください。流動的なレイアウトで期待されるように、画像はそれに応じてサイズ変更されます。

Slickはいくつかのインラインスタイルを動的に挿入し、その1つは幅です。カルーセルのすべての子divの幅を確認できます。 Slick inline styles

Slickの通常の動作は、ウィンドウのサイズを変更するときにこれらの幅を更新することですが、何らかの理由でこのサイトでは発生しません。

これがウェブサイトへのリンクです： http://smart.trippple.com.br/

ホームページには、次の位置に2つのカルーセルがあります。

  1. main＃slider-home .container .slider-session
  2. main #seguradoras .container＃seguradoras-carrousel .slider-session

これは私がスクリプトを開始する方法です：

  $('#slider-home .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1000
  });

  $('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4
  });

そしてここに私がこれまでに試したすべてがあります：

  • JQueryとSlickを除くすべてのスクリプトを非アクティブ化して、競合が発生していないことを確認しました。
  • JQueryのさまざまなバージョンをテストしました。
  • JQuery Migrateを含めて試してみました。
  • サイトのヘッダーにjQuery + Slickをロードしようとしました。
  • コンテナーからカルーセルを削除しようとしました。
  • スタイルシートのカルーセルdivに幅と最大幅を設定しようとしました。

  • スリックのサイズ変更方法を使用しようとしました：

    $（window）.resize（function（）{$（ '＃slider-home .slider-session'）。slick（ 'resize'）;}）;

  • あらゆる場所を調査し、プラグインのGithubページで問題を開きます。プラグインの作者は、スクリプトは間違いなくサイズ変更され、問題は私の環境にあり、彼は正しいと答えました。テスト用に静的HTMLページを作成しましたが、カルーセルは100％応答しました。このWebサイトには、スクリプトの正常な動作を妨げている何かがあります。

ちなみに、サイトのメインスタイルシートに埋め込んだため、Slickのスタイルシートはリンクされていません。

どんな助けでも本当に感謝しています！私は少なくとも2週間はこれを解決しようとしていますが、他に何を試すべきかわかりません。どんなアイデアでも大歓迎です。ありがとうございました！

jquerywordpressslick.js
6
Gabriel Bonifacio

私は最近同じ問題を抱えていましたが、これが私がそれを解決した方法です。ウィンドウのサイズ変更または方向変更イベントで、スリックを破棄して、もう一度作成します。

var slickOptions = {
    arrows: false,
    dots: true,
    adaptiveHeight: true,
    mobileFirst: true
};

$('.slick-element').slick(slickOptions);

$(window).on('resize orientationchange', function() {
    $('.slick-element').slick('unslick');
    $('.slick-element').slick(slickOptions);
});
2
laviku

私の場合、実際には画像のストレッチがありませんでした

.slick-slide img {width: 100%;}
2
mdob

スリックレスポンシブオプションを試しましたか？これがあなたが探している答えであるかどうかはわかりませんが、ブラウザのサイズ変更に基づいてスライダを機能させるために私はそうしています。

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4,
    //start responsive option
    responsive: [
    {
      breakpoint: 600, //at 600px wide, only 2 slides will show
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, //at 480px wide, only one slide will show
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});

更新ではなくサイズ変更で動作するように更新

サイズ変更機能とスリック機能の2つの機能が必要です

jQuery(window).on('resize', function() {

  clearTimeout(resizeTimerInternal)

  resizeTimerInternal = setTimeout(function() {
    //add functions here to fire on resize
    slickSliderWithResize();
  }, 100)

});


function slickSliderWithResize() {
  if (jQuery(window).width() < 1150) {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {

    }
    else {
      jQuery('.slick-slider-wrapper').slick({
        // slick options
      });
    }
  } else {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
      jQuery('.slick-slider-wrapper').slick("unslick");
    }
  }
}
slickSliderWithResize();

これはサイズ変更で機能するはずですが、スライダーに合うように少し編集する必要があります。スライダーコンテナーの名前（私は単にslick-slider-wrapperと名付けました）、slickオプション、およびそれを分解するサイズ（私は1150px未満に設定しています）

2
cup_of

多分あなたがスリックにウィンドウのサイズ変更でサイズ変更を強制すると、これは収まるでしょう：

$(window).resize(function() {
  $('#slider-home .slider-session').slick('resize');
  $('#seguradoras-carrousel .slider-session').slick('resize');
});
1
technico
$('#slick-slider').slick('setDimensions');

サイズを変更した後、または非表示のスライダーを表示した後に機能します。

このメソッドは公式ドキュメントでは利用できません。

1
VALLEE David

$（ '＃slick-slider'）。slick（ 'setDimensions'）;

$（ '＃slick-slider'）。slick（ 'setPosition'）;

私のために働く

0
Letícia Gomes