跳至主要内容

影片

在滑動卡片中放入影片,例如: youtube

import BearCarousel from 'bear-react-carousel';
import ReactPlayer from 'react-player'

const imagesAndVideo = [
{id: 1, type: 'video', video: 'https://youtu.be/hGmBkYS7xT0?si=H-YERUcuAtUe7220'},
{id: 2, type: 'image', image: require('@site/static/img/racing/02.jpg').default},
{id: 3, type: 'image', image: require('@site/static/img/racing/03.jpg').default},
{id: 4, type: 'image', image: require('@site/static/img/racing/04.jpg').default},
{id: 5, type: 'image', image: require('@site/static/img/racing/05.jpg').default},
{id: 6, type: 'image', image: require('@site/static/img/racing/06.jpg').default},
];

const imageAndVideoData = imagesAndVideo.map(row => {
return <BearSlideCard key={row.id} bgUrl={row.image}>
{row.video &&
<ReactPlayer width="100%" url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
}
</BearSlideCard>
});


<BearCarousel
// ...ignore some
height="360px"
data={imageAndVideoData}
/>