标签: pure-react-carousel

当我导入时

import { Carousel } from "react-responsive-carousel";

并像下面这样使用它：

 <Carousel
        autoPlay
        infiniteLoop
        showStatus={false}
        showIndicators={false}
        showThumbs={false}
        interval={5000}
      ></Carousel>

 TypeError: Super expression must either be null or a function, not undefined

我期望在我的网站上出现横幅轮播

我不确定如何在纯反应轮播中的幻灯片之间添加“间距”。

有没有简单的选择如何在幻灯片之间添加间隙？我尝试了几种方法。当我一一滑动时，我需要正确的填充。使用边距时，应用于幻灯片或内部元素时，滑块会损坏，将最后一张幻灯片推到新行块上。

我尝试在react中实现一个简单的轮播，我使用了纯css和库，但在所有情况下它总是显示如下

结果img

所有子项均以垂直线显示。

我尝试使用以下代码：

https://www.npmjs.com/package/react-responsive-carousel

https://www.npmjs.com/package/pure-react-carousel

总而言之，结果是相同的，我在 css 类中没有样式

import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } 
 from 'pure-react-carousel';

class App extends Component {
render()  {
    return (
      <div className="App">
          <CarouselProvider
              naturalSlideWidth={30}
              naturalSlideHeight={10}
              totalSlides={3}
            >
              <Slide index={0}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={1}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={2}>
                  <img src="/img/Gallery01.png" />
              </Slide>
            </CarouselProvider>
      </div>
    );
  }
}
export default App;