如何使 Swiper.js 和 React Player 轮播响应式答案

【问题标题】：How to make the Swiper.js and React Player carousel responsive如何使 Swiper.js 和 React Player 轮播响应式
【发布时间】：2022-10-04 23:52:51
【问题描述】：

我一直在寻找一种方法来让我的Swiper.js 轮播在嵌套 Youtube React Player 时响应。我终于找到了一种解决方法，希望这对某人有所帮助。如果slidesPerView 大于 2 甚至浮点数（如slidesPerView={1.3}），这也有效。

【问题讨论】：

标签： reactjs youtube-api carousel swiper.js react-player

【解决方案1】：

删除默认 css mySwiper 类，并应用 player-wrapper 和 react-player css，如下所示。关键是player-wrapper div 是自关闭的，不会包装<ReactPlayer> 组件。在 <ReactPlayer> 组件中也有 width 和 height 属性为 100%。

 <Swiper
   slidesPerView={1.3}
   grabCursor={false}
   loop={false}
   watchSlidesProgress={true}
   centeredSlides={true}
   modules={[Pagination, Navigation]}
   // className='mySwiper' <=remove
        >
 <SwiperSlide>
     <div className='player-wrapper' /> //<= self close div
        <ReactPlayer
           url='youtube.com/1234'
           controls={true}
           width='100%'
           height='100%'
           playing={isPlaying === data.id}
           config={{
              youtube: {
              playerVars: { showinfo: 1 },
                        },
                   }}
           className='react-player'
        />
 </SwiperSlide>

CSS

.player-wrapper {
  position: relative;
  padding-top: 56.25%
}
.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

【讨论】：