React Swiper轮播图

需求

• 实现React轮播图

使用库

• swiper官网 https://swiperjs.com/react

实现方法

/** 组件：图片轮播*/
import React, { Component } from "react";
import SwiperCore, { Navigation, Pagination, Autoplay, Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.css";
import styles from "./index.less";
SwiperCore.use([Navigation, Pagination, Autoplay, Thumbs]);

interface IProps {
  imgs?: Array<any>;
}

class Gallery extends Component<IProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      swiper: null,
      swiperThumb: null,
      activeIndex: 0,
    };
  }
  render(): JSX.Element {
    const { imgs = [] } = this.props;
    const { activeIndex } = this.state;
    return (
      <div className={styles.picsBox}>
        <div className={styles.picsBig}>
          <Swiper
            autoplay
            navigation
            loopedSlides={5}
            className={styles.swiperBox}
            pagination={{
              type: "fraction",
            }}
            thumbs={{ swiper: this.state?.swiperThumb }}
            onSlideChange={(swiper) => {
              this.setState({ activeIndex: swiper?.activeIndex });
              this.state?.swiperThumb.slideTo(swiper?.activeIndex);
            }}
            onSwiper={(swiper) => this.setState({ swiper })}
          >
            {imgs.map((imgInfo, index) => {
              return (
                <SwiperSlide key={index}>
                  <img src={imgInfo} className={styles.imgBox} />
                </SwiperSlide>
              );
            })}
          </Swiper>
        </div>
        <div className={styles.picsList}>
          <Swiper
            onSwiper={(swiperThumb) => this.setState({ swiperThumb })}
            className={styles.swiperBoxThumb}
            spaceBetween={16}
            slidesPerView={4}
            freeMode={true}
            direction={"vertical"}
            watchSlidesVisibility={true}
            watchSlidesProgress={true}
          >
            {imgs.map((imgInfo, index) => {
              return (
                <SwiperSlide key={index} className={styles.swiperBoxThumbSlide}>
                  {activeIndex !== index ? (
                    <div className={styles.mask}></div>
                  ) : null}
                  <img src={imgInfo} className={styles.thumbImg} />
                </SwiperSlide>
              );
            })}
          </Swiper>
        </div>
      </div>
    );
  }
}

export default Gallery;

.picsBox {
   100%;
  height: 650px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .picsBig {
     900px;
    height: 100%;
  }
  .picsList {
     236px;
    height: 100%;
    overflow: hidden;
  }
  .imgBox {
     100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }
}

.swiperBox {
   100%;
  height: 100%;
  color: white;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  --swiper-theme-color: white;
}

.swiperBoxThumb {
   236px;
  height: 650px;
  .swiperBoxThumbSlide {
    position: relative;
     100%;
    height: 150px;
    overflow: hidden;
    cursor: pointer;
  }
  .thumbImg {
     100%;
    height: 100%;
    object-fit: cover;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
  }
}
.swiper-slide-thumb-active {
  opacity: 1 !important;
}

效果预览