在媒体屏幕上显示Jquery Slick选项

问题描述

我是训练初学者！

我的标题上有一个光滑的滑块。 我使用JQuery的滑块上有Dots：true和arrow。

我要显示：当屏幕小于1000像素时，我的点上都没有显示。

我正在启动Jquery，所以我不知道如何在我的app.js上进行媒体查询。

现在，我在我的JQuery上有这个

$('.hp-header-slider').slick({
        autoplay: true,autoplaySpeed: 4000,dots: true,infinite: true,cssEase: 'linear',arrows: false,});

然后我将媒体查询放在CSS上，但是没有用。

 /* PHONE - MOBIL - TAB  */
@media screen and (max-width: 1000px){

  .hp-header-slider .slick-dotted ul.slick-list li.slick-dots{
    display: none !important;
  }

我在JQuery上找不到像Slike-Slider一样的媒体文档。.感谢您的帮助

解决方法

Slick具有内置的响应选项： 例如：

$('.responsive').slick({
dots: true,infinite: false,speed: 300,slidesToShow: 4,slidesToScroll: 4,responsive: [
  {
    breakpoint: 1024,settings: {
      slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
    }
  },{
    breakpoint: 600,settings: {
      slidesToShow: 2,slidesToScroll: 2
    }
  },{
    breakpoint: 480,settings: {
      slidesToShow: 1,slidesToScroll: 1
    }
  }
  // You can unslick at a given breakpoint now by adding:
  // settings: "unslick"
  // instead of a settings object
]
});