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

Question

我是训练新手！

我的页眉上有一个漂亮的滑块。我的滑块上有 Dots:true 和箭头 JQuery。

当屏幕小于 1000 像素时，我想在我的点上显示 display:none。

我要开始 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 这样的媒体文档。感谢您的帮助

Answer 1

Slick 对此有 built-in 响应选项：例如：


$('.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
]
});

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

Display Jquery Slick option on media screen

css

jquery

css-selectors

slick.js