index.js

import VmsVideo from '@wisdom-components/VmsVideo';
import { Modal } from 'antd';
import React from 'react';
import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';

SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);

const VideoSliderModal = (props) => {
  const { modalInfo, videoInfos, JessibucaObj } = props;

  // 切换轮播页 控制按钮是否显示
  const handleSlideChange = (swiper) => {
    const nextButton = document.querySelector('.swiper-button-next');
    const prevButton = document.querySelector('.swiper-button-prev');
    if (swiper.isBeginning) {
      prevButton.style.display = 'none'; // 隐藏左侧按钮
    } else {
      prevButton.style.display = 'block'; // 显示左侧按钮
    }

    if (swiper.isEnd) {
      nextButton.style.display = 'none'; // 隐藏右侧按钮
    } else {
      nextButton.style.display = 'block'; // 显示右侧按钮
    }
  };

  return (
    <Modal
      footer={null}
      width={1000}
      title="视频预览"
      {...modalInfo}
      wrapClassName={styles['video-carousel-modal']}
      bodyStyle={{ padding: 0 }}
      getContainer={document.body}
      destroyOnClose
    >
      <>
        {videoInfos.length === 1 ? (
          videoInfos.map((item, index) => (
            <div className={styles['swiper-wrap']} key={index}>
              <div className={styles['swiper-title']}>{item.name}</div>
              <div className={styles['swiper-content']}>
                <VmsVideo
                  VideoInfo={{ ...item, width: modalInfo?.width ?? 1000, height: 500 }}
                  JessibucaObj={JessibucaObj}
                />
              </div>
            </div>
          ))
        ) : (
          <>
            <Swiper
              slidesPerView={1}
              spaceBetween={0}
              initialSlide={0}
              pagination={{
                clickable: true,
              }}
              lazy
              virtual
              navigation
              onSlideChange={(swiper) => handleSlideChange(swiper)}
            >
              {videoInfos.map((item, index) => (
                <SwiperSlide key={index}>
                  <div className={styles['swiper-wrap']}>
                    <div className={styles['swiper-title']}>{item.name}</div>
                    <div className={styles['swiper-content']}>
                      <VmsVideo
                        VideoInfo={{ ...item, width: modalInfo?.width ?? 1000, height: 500 }}
                        JessibucaObj={JessibucaObj}
                      />
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </>
        )}
      </>
    </Modal>
  );
};

export default VideoSliderModal;