javascript - 当我调整浏览器大小时,react-slick 幻灯片的宽度不会改变
问题描述
我通过 react-slick 创建了一张推荐幻灯片。
我的代码是:
const settings = {
dots: true,
adaptiveHeight: true,
swipeToSlide: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoPlay: true,
className: 'sample'
};
一切正常。但是,当我调整浏览器的大小时,幻灯片的宽度不会改变。我检查了我的 console.log,slick-track 的宽度总是 9900px。我认为调整浏览器大小时应该更改宽度。
谁能帮我解决这个问题?我认为在 reactjs 中调整浏览器大小时重新渲染元素有问题:(。
谢谢
解决方案
如果您的目标是在调整浏览器大小时更改 react-slick 选项,请使用响应式选项。
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024, // width to change options
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
}
]
}
推荐阅读
- asterisk - 当我在 Asterisk 中拨打任何分机时,首先播放一些问候消息?
- c++ - 对话关闭信号
- capacitor - 无法在 Capacitor Ionic 的应用程序视图中打开 PDF 文件
- wpf - 将带有数据库的 wpf 应用程序提供给客户端
- javascript - V8 可以执行 JS 代码的构建时预编译吗?
- c++ - QtCharts:如何用误差线绘制线系列
- node.js - 安装 npm 和 vue 后“npm run hot”抛出错误
- angular - 错误:InvalidPipeArgument:管道“AsyncPipe”MatTable Angular 11 的“[object Object]”
- dataframe - 从过滤聚合pySpark中获取第一个示例元素
- python - P4Python 删除客户端/工作区的问题