标签: react-responsive-carousel

我正在尝试创建图像和嵌入式 Youtube 视频的轮播（第一项是 youtube 视频，其余的是图像）我正在使用 React Responsive Carusel npm 包，但我找不到创建我想要的轮播的方法没有错误。

我在这里看到了一个解决方案，但它仅适用于视频。

这是我现在的代码：

import React from 'react'
import 'react-responsive-carousel/lib/styles/carousel.min.css' // requires a loader
import { Carousel } from 'react-responsive-carousel'
import ReactPlayer from 'react-player'
const ModalImagesPreview = () => {
    
  return (
    <div>
      <Carousel>
        <div>
          <ReactPlayer
            url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
            volume='1'
            muted
            width='100%'
            playing={true}
          />
        </div>
        <div>
          <img src='https://cdn.dribbble.com/users/2146089/screenshots/12387473/media/bf9ffb522fe68ba57ebdc62bc3f16cc5.png' />
        </div>
        <div>
          <img src='https://cdn.dribbble.com/users/427857/screenshots/12318706/media/f30f662dbf160022412812881b2afb43.jpg' />
        </div>
      </Carousel>
    </div>
  )
}

export default ModalImagesPreview

感谢各位帮忙的人！

我正在使用反应响应式轮播，它看起来很奇怪

render() {
    return (
      <div className="slider-container">
        <Carousel className="carousel-style" showArrows={true} showThumbs={false} showStatus={false}>
          {this.generateCards()}
          <div className="slider-item-div">
            Test
          </div>
        </Carousel>
      </div>
    );
  }

这是CSS

.slider-container {
    width: 100%;
    height: 100%;
}

.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}

.carousel-style {
    height: 100% !important;
}

不幸的是，这就是它呈现的内容

我希望高度 == 100% 并填满屏幕。另外，我希望显示左右箭头，而不将鼠标悬停在它们上方，如下所示： http: //react-responsive-carousel.js.org/#demos

我正在使用react-responsive-carousel库。在这里，我想将默认指示器CSS、点形状更改为线形状。我的代码是，

 <CarouselWrapper
      sx={{ marginTop: "124px", maxHeight: "486px", minHeight: "150px" }}
    >
      <Carousel autoPlay infiniteLoop showArrows={false}>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
      </Carousel>
    </CarouselWrapper>

这些指标的当前形状，

是否可以自定义点形状指示器？