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

【问题标题】：Display Jquery Slick option on media screen在媒体屏幕上显示 Jquery Slick 选项
【发布时间】：2021-02-14 08:10:29
【问题描述】：

我是初学者！

我的标题上有一个光滑的滑块。我的 JQuery 滑块上有 Dots:true 和箭头。

我想要一个 display:none 在屏幕小于 1000 像素时显示在我的 Dots 上。

我正在启动 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 .. 感谢您的帮助

【问题讨论】：

标签： jquery css css-selectors slick.js

【解决方案1】：

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
]
});

【讨论】：