滑溜旋转木马错误
Slick Carousel Error
有人知道这个错误的可能原因吗?
Uncaught TypeError: Cannot read property 'add' of null
我正在使用React.js的光滑carousel。我传入图像数组作为道具,并调用图像滑块组件中的slick函数。这个组件在一个页面上工作得很好,但在另一个页面上,我一直看到这个错误,图像显示在滑块上,但我认为因为这个错误,其他东西在页面上断裂,有什么想法吗?
下面是该组件的主代码,图像作为道具从父组件传入:
import React from 'react';
import {Link} from 'react-router';
import _ from 'lodash';
import Carousel from '../../Util/Carousel';
const ResOpt = [{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
dots: false
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1.5,
arrows: false,
dots: false,
infinite: false
}
}
];
class ImagesCarousel extends React.Component {
constructor() {
super();
this.carouselDidStart = false;
this.carousel = new Carousel({
outerSelector: ".carousel-container",
innerSelector: ".images-container",
responsive: ResOpt,
infinite: false
});
}
componentDidUpdate() {
if (!this.carouselDidStart && this.dataIsLoaded() ) {
this.carousel.startCarousel();
}
}
componentWillUnmount() {
if (this.carousel) {
this.carousel.destroy();
this.carousel = null;
}
}
dataIsLoaded() {
return !_.isEmpty(this.props.images);
}
render() {
let images = this.props.images;
return (
<div className="detail-images">
<div className="carousel-container">
<div className="images-container">
{
(images || []).map((image, index) => {
return <div key={image.imageId} className="img-item"><img src={image.imageName} /></div>
})
}
</div>
</div>
</div>
);
}
}
export default ImagesCarousel;
下面是主carousel类:
import $ from 'jquery';
import slick from 'slick-carousel';
export default class Carousel {
constructor(options) {
this.carouselIsOn = false;
this.breakpoint = breakpoint;
this.innerSelector = options['innerSelector'];
this.outerSelector = options['outerSelector'];
this.slickOptions = {
infinite: options.infinite || true,
slidesToShow: options['slidesToShow'] || 3,
slidesToScroll: options['slidesToScroll'] || 3,
dots: true,
arrows: true,
appendArrows: options.appendArrows || `${this.outerSelector} .carousel-nav`,
appendDots: options.appendDots || `${this.outerSelector} .carousel-nav`,
responsive: options.responsive || DEFAULT_RESPONSIVE
};
this.startCarousel = this.startCarousel.bind(this);
}
startCarousel() {
const carouselContainer = $(this.innerSelector);
carouselContainer.slick(this.slickOptions);
this.carouselIsOn = true;
carouselContainer.find('.slick-cloned').attr('data-reactid', null);
}
destroy() {
$(this.innerSelector).slick("unslick");
}
}
这可能是初始化两次slick的结果——参见另一个SO问题。你可以用init事件检查你是否运行了两次init。
$( '.your-slick-container' ).on('init', function(event, slick, direction){
console.log('slick init');
});
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 禁用旋转木马中的下一个按钮和上一个按钮
- 旋转木马;启用内容安全策略时无法工作
- 在引导程序旋转木马中显示下一个图像
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 猫头鹰旋转木马宽度计算错误
- 猫头鹰旋转木马动画未在Chrome中应用
- 猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
- 在Javascript中设置多个小图像(如旋转木马)
- 如何使引导旋转木马保持图像纵横比
- 使用旋转木马在元素上切换类
- 为什么我的猫头鹰旋转木马在我的第一组中不起作用?请问我的错误在哪里
- 引导程序旋转木马错误
- 猫头鹰旋转木马和引导程序宽度显示错误
- 滑溜旋转木马错误
- 未捕获的类型错误:不能调用方法'split'无尽的旋转木马
- 猫头鹰旋转木马返回错误
- 谷歌地图与引导3旋转木马错误
- 在使用选项卡时,错误地应用了引导旋转木马活动类
- 引导旋转木马滑动时高度变化的错误