Question

我有一个Codepen来说明我的问题。

根据该密码笔，一个接一个显示两个图像。这适用于Codepen。但是，如果我尝试在项目中使用它，则第一个图像会显示而第二个图像则不会显示，相反，在第二个图片上会出现空白。

这是我的项目代码。

import React from 'react';
import Slider from "react-slick";
import './../../../css/style.css';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import CBT1 from './../../../../../public/assets/images/CBT1.png'
import CBT2 from './../../../../../public/assets/images/CBT2.png'

class HomeAnimation extends React.Component {
constructor(props) {
  super(props);

  this.settings = {
    infinite: true,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: 3000,
    fade: true,
    pauseOnHover: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };
}

render() {
  return (
    <div>
      <SimpleSlider settings={this.settings} />
     </div>
  );
}
}

class SimpleSlider extends React.Component {

render () {
  return (
    <Slider {...this.props.settings}>
       <div className="slide-0"><img src= { CBT1 } /></div>
       <div className="slide-1"><img src= { CBT2 } /></div>
       </Slider>
    )
  }
}

export default HomeAnimation;

它不只是显示滑块的第二格。与我正在使用的React版本有关。我的反应版本是16。

React光滑轮播不会更新图像

0 个答案: