Reactjs 如何添加视频以响应旋转木马Npm包？

我正在尝试创建一个包含图像和嵌入式Youtube视频的旋转木马（第一项是Youtube视频，其余是图像） 我正在使用React-Responsive Carusel npm软件包，但我找不到一种方法来创建我想要的没有bug的carousel

我看到了一个解决方案，但它只适用于视频

这是我目前的代码：

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

从“React”导入React
导入'react responsive carousel/lib/styles/carousel.min.css'//需要一个加载器
从“响应旋转木马”导入{Carousel}
从“react player”导入react player
const ModalImagesPreview=（）=>{
返回(
)
}
导出默认ModalImagesPreview

---

谢谢你的帮助

以下是我在react responsive carousel网站上找到的内容

import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
import React from 'react';
import ReactPlayer from 'react-player';
import { Carousel } from 'react-responsive-carousel';
import { PropTypes } from 'prop-types';
import { Grid, makeStyles } from '@material-ui/core';

const DUMMY_VIDEOS = [
  {
   _id: '5fd025a181e2c80897c14ae1',
   videoUrl: 'https://www.youtube.com/embed/AVn-Yjr7kDc'
  }
];

const useStyles = makeStyles(theme => ({
  carousel: {
  margin: theme.spacing(2)
 }
}));

const YoutubeSlide = ({ url, isSelected }) => (
  <ReactPlayer width="100%" height="276px" url={url} playing={isSelected} />
);

const CarouselVideo = ({ data }) => {
  const classes = useStyles();

  const customRenderItem = (item, props) => (
    <item.type {...item.props} {...props} />
  );

  const getVideoThumb = videoId =>`https://img.youtube.com/vi/${videoId}/default.jpg`;

  const getVideoId = url =>url.substr('https://www.youtube.com/watch?v='.length, url.length);

  const customRenderThumb = children =>
    children.map(item => {
      const videoId = getVideoId(item.props.url);
  
      return <img key={videoId} src={getVideoThumb(videoId)} />;
  });

  return (
    <Grid item md={6} xs={12}>
      <Carousel
       autoPlay={false}
       className={classes.carousel}
       emulateTouch={true}
       showArrows={true}
       showThumbs={true}
       showStatus={false}
       infiniteLoop={true}
       renderItem={customRenderItem}
       renderThumbs={customRenderThumb}
     >
      {data.map(v => (
        <YoutubeSlide
          url={v.videoUrl}
          muted
          playing={false}
          key={v._id ? v._id : v.id}
        />
      ))}
     </Carousel>
   </Grid>
  );
 };

 YoutubeSlide.propTypes = {
   url: PropTypes.string,
   isSelected: PropTypes.bool
 };

 CarouselVideo.propTypes = {
   data: PropTypes.array
 };

 CarouselVideo.defaultProps = {
  data: DUMMY_VIDEOS
 };

export default CarouselVideo;

import'react responsive carousel/lib/styles/carousel.min.css'；//需要一个加载器
从“React”导入React；
从“react player”导入react player；
从“反应响应旋转木马”导入{Carousel}；
从“属性类型”导入{PropTypes}；
从“@material ui/core”导入{Grid，makeStyles}；
const DUMMY_视频=[
{
_id:'5fd025a181e2c80897c14ae1'，
videoUrl:'https://www.youtube.com/embed/AVn-Yjr7kDc'
}
];
const useStyles=makeStyles（主题=>({
旋转木马：{
页边空白：主题。间距（2）
}
}));
const YoutubeSlide=（{url，isSelected}）=>(
);
const CarouselVideo=（{data}）=>{
const classes=useStyles（）；
常量customRenderItem=（项目、道具）=>(
);
const getVideoThumb=videoId=>`https://img.youtube.com/vi/${videoId}/default.jpg`；
const getVideoId=url=>url.substr（'https://www.youtube.com/watch?v='.length，url.length）；
const customRenderThumb=子项=>
children.map（项=>{
const videoId=getVideoId（item.props.url）；
返回；
});
返回(
{data.map（v=>(
))}
);
};
YoutubeSlide.propTypes={
url:PropTypes.string，
isSelected:PropTypes.bool
};
CarouselVideo.propTypes={
数据：PropTypes.array
};
CarouselVideo.defaultProps={
数据：虚拟视频
};
导出默认的CarouselVideo；

最后一步是调用这个CarouselVideo，你想用你的数据作为道具进行渲染，或者只调用它而不使用passint anythind=>这将显示我在那里添加的虚拟视频。 所以你可以这样称呼它：

 // DisplayVideo.js file with default videos as shown below
 const DisplayVideo = () => {
   render( <CarouselVideo />)
 }

 // or with your data
 const DisplayVideo = ({PASS_YOU_DATA_HERE}) => {
   render( <CarouselVideo data={PASS_YOU_DATA_HERE} />)
 }

//DisplayVideo.js文件和默认视频，如下所示
const DisplayVideo=（）=>{
渲染（）
}
//或者用你的数据
const DisplayVideo=（{在此处传递数据}）=>{
渲染（）
}

结果：

---

（来源：）

你有没有想过？我也在尝试做同样的事情……你有任何演示吗？@ApoorvaShah我已经添加了更多关于如何呈现数据的细节。如果您需要更多详细信息/帮助，请告诉我。