我正在使用reactjs创建光滑的 slider 。 slider 工作正常,但它会多次渲染幻灯片。我正在使用 map 功能循环播放幻灯片。
截图:
我的脚本:
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;
我做错了什么?
最佳答案
这不是一个错误,它是一个功能,可以在最后一个项目和下一个第一个项目中实现最佳动画性能!。 这就是光滑 slider 无限循环的工作原理。 如果 slider 仅克隆图像/div,最终会出现性能问题。 现在,如果您确实不想克隆 images/div 那么您需要设置
infinite: false
或
infinite: sliderItem.length > 3 // may be best solution
关于reactjs - 光滑的 slider 在reactjs中多次渲染幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59911102/