reactjs - 光滑的滑块在reactjs中多次渲染幻灯片
问题描述
我正在使用 reactjs 创建光滑的滑块。滑块工作正常,但它会多次渲染幻灯片。我正在使用地图功能循环播放幻灯片。
截图:
我的脚本:
import React, {Component} from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '../css/Header.css';
//import SlideItem from './SlideItem';
class SliderSlick extends Component{
shouldComponentUpdate () {
// TODO: add proper implementation that compares objects
return false;
}
render() {
//Slide Items
var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];
var settings = {
autoplay: false,
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 1000,
};
return (
<div className="container">
<Slider {...settings}>
{
sliderItem.map((item,index) => {
return (
<div data-index={index} key={index}>
<img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" />
</div>
)
})
}
</Slider>
</div>
);
}
}
export default SliderSlick;
我究竟做错了什么?
解决方案
这不是错误,它是在最后一个项目和下一个第一个项目中具有最佳动画性能的功能!。这就是光滑滑块无限循环的工作原理。如果滑块只克隆图像/div,最终会出现性能问题。现在,如果你真的不想克隆图像/div,那么你需要设置
infinite: false
或者
infinite: sliderItem.length > 3 // may be best solution
推荐阅读
- php - 在一行代码上创建一个带有两个 wordpress 错误的元框
- ansible-inventory - 如何将ansible变量从hosts文件传递到paly-book
- image - 如何为图像超分辨率创建数据集
- ms-access - 在 MS Access 中扫描以在表单上输入数据,而无需按任何键
- excel - 如何引用在 VBA 中更改名称的工作表?
- javascript - d3 v6。如何在地图上绘制边界框(正确投影的矩形)
- java - 片段 TextView 未更改回语言环境
- c++ - __interceptor_popen 中的未初始化字节
- elasticsearch - ElasticSearch Screen Xpath 识别动态按钮
- python - 如何在 OpenCV-Python 库中找到属于某个簇的图像像素的概率?