web-dev-qa-db-ja.com

滑らかなスライダーでレスポンシブブレークポイントが機能しない

ブラウザのサイズを変更しなくても正常に機能する滑らかなスライダーを実装しました。しかし、ブラウザーのサイズを1024に変更すると、レスポンシブブレークポイント設定が機能しなくなります。

Jquery--

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

デモ- https://jsfiddle.net/squidraj/hn7xsa4y/4/

どんな助けでも大歓迎です。

jqueryresponsiveslick.jsfull-width
7
Prithviraj Mitra

この設定をコードに追加します。

$(".slides").slick({
    autoplay:true,
    mobileFirst:true,//add this one
}
9
Shady Kip

各ブレークポイントにslidesToShowおよびslidesToScrollオプションを追加します。

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }
1
Soumitra Sarkar

まず、「variableHeight」オプションは Slick Carousel には存在しません。

この問題を解決するには、variableWidth: trueを削除します。これにより、スライドがカルーセルでいっぱいになるためです。また、ページがこの方法論を使用していない場合は、「mobileFirst」オプションを使用できません。

だから最後にあなたの設定は次のようになるはずです、以下

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  mobileFirst: true, //optional, to be used only if your page is mobile first
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false,
    }
  }]
});

宜しくお願いします。

0
Ajmal

まず、例では古いバージョンのslickを使用します。このバージョンはmobileFirstプロパティをサポートしていません。次に、variableWidthプロパティを使用する場合は、slidesToShowを削除する必要があります。これはフィドルです https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

0
Алексей Косьяненко

これは私にとってはトリックでした。

    function resetSlick($slick_slider, settings) {
            $(window).on('resize', function() {
                if ($(window).width() < 320) {
                    if ($slick_slider.hasClass('slick-initialized')) {
                        $slick_slider.slick('unslick');
                    }
                    return
                }

                if (!$slick_slider.hasClass('slick-initialized')) {
                    return $slick_slider.slick(settings);
                }
            });
        }

 slick_slider = $('.client-logos');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
     slick_slider = $('.container');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
    slick_slider.slick(settings);
    resetSlick(slick_slider, settings);

これをjsに追加し、図のようにスライダーを呼び出します。

そしてあなたのCSSでslidedisplay: inline-block; それでおしまい。すべての応答画面で動作します。

0
Sheraz Ahmed