jquery - 在媒体屏幕上显示 Jquery Slick 选项
问题描述
我是训练的初学者!
我的标题上有一个光滑的滑块。我的滑块上有 Dots:true 和箭头,带有 JQuery。
我想要一个 display:none 当屏幕小于 1000px 时在我的 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 .. 感谢您的帮助
解决方案
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
]
});
推荐阅读
- wpf - 使用 XAML 岛在 WPF 应用中托管标准 UWP 控件
- reactjs - 材料表反应。如何使表格标题和标题具有粘性
- sonarqube - Sonarqube 找不到可能的空指针异常
- java - 在指定超时之前抛出异常“java.net.ConnectException:连接超时:连接”
- google-cloud-sql - 谷歌 SQL 查询 (MySQL)
- reactjs - 反应输入:在输入为空的情况下添加值
- vue.js - vue-bootstrap 不能在 sortable 中排序:true
- alfresco - 可以将 Alfresco 用作 JCR 实现吗?
- oracle - 执行 IMP 命令时的 IMP-00403
- python - list(dictionary.values()) 与 dictionary.values()