index.js

import React, { Component } from "react"
import Swiper from "swiper"
import "./index.scss"
import "swiper/dist/css/swiper.min.css"
import { Link } from "react-router-dom"

class Index extends Component {
  container = null
  swiper = null

  componentDidMount() {
    if (this.props.bannerList.length > 1) {
      this.swiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        spaceBetween: 12,
        centeredSlides: true,
        slidesPerView: "auto",
        loopedSlides: 3,
        autoplay: true,
      })
    }
  }

  componentWillUnmount() {
    this.swiper && this.swiper.destroy()
  }

  render() {
    const { bannerList } = this.props
    return (
      <div className={"index-banner-swiper"}>
        <div className={"swiper-container"} ref={(el) => (this.container = el)}>
          <ul className="swiper-wrapper">
            {bannerList &&
              bannerList.length > 0 &&
              bannerList.map((item, index) => {
                return (
                  <li className={"swiper-slide"} key={index}>
                    {Number.isNaN(parseInt(item.jump_url)) ? (
                      <a href={item.jump_url} key={index}>
                        <img className="item" src={item.name} alt="" />
                      </a>
                    ) : (
                      <Link
                        to={{
                          pathname: "/detail",
                          search: `?id=${item.jump_url}`,
                        }}
                        key={index}
                      >
                        <img className="item" src={item.name} alt="" />
                      </Link>
                    )}
                  </li>
                )
              })}
          </ul>
        </div>
      </div>
    )
  }
}

export default Index