KeLaMaYi_H5/H5/src/pages/A3banner/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
import classNmaes from 'classnames'

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
function A3banner() {
  const imgArr = myData.homeData.map((item) => myUrl + item.cover)

  console.log(imgArr, 'imgArr')
  const [curIndex, setCurIndex] = useState(0)
  return (
    <div className={styles.A3banner} style={{ backgroundImage: `url(${myUrl + myData.homeBgDark})` }}>
      <div className="topPic"><img src={require('@/assets/img/title.png')} alt="" /></div>
      <Swiper
        effect={'coverflow'}
        grabCursor={true}
        centeredSlides={true}
        loop={true}
        slidesPerView={'auto'}
        coverflowEffect={{
          rotate: 0,
          stretch: 0,
          depth: 150,
          modifier: 4,
        }}
        spaceBetween={-100}
        pagination={{ el: '.swiper-pagination', clickable: true }}
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          clickable: true,
        }}
        modules={[EffectCoverflow, Pagination, Navigation]}
        className="swiper_container"
        onActiveIndexChange={(swiper: any) => {
          if (swiper.activeIndex !== undefined) {
            setCurIndex(swiper.realIndex); // 使用realIndex处理loop模式下的真实索引
          }
        }}

      >
        {
          imgArr.map((item, index) => (
            <SwiperSlide key={index}>
              <img style={{
                width: '100%',
                height: '100%',
                objectFit: 'contain',
              }} src={item} alt="slide_image" />
            </SwiperSlide>
          ))
        }
        <div className="swiper-button-prev swiper-button-arr-custom"><img src={require('@/assets/img/left.png')} alt="" /></div>
        <div className="swiper-button-next swiper-button-arr-custom"><img src={require('@/assets/img/right.png')} alt="" /></div>
      </Swiper>
      <div className="contentTxt">
        <div className="title">{myData.homeData[curIndex].name}</div>
        <div className="txt">{myData.homeData[curIndex].txt}</div>
      </div>
    </div>
  );
}

const MemoA3banner = React.memo(A3banner)

export default MemoA3banner