swiper 6.8.4的使用

import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Navigation } from 'swiper/core'; import 'swiper/swiper.min.css'; import 'swiper/components/navigation/navigation.min.css';

SwiperCore.use([Navigation]);

// import Slider from 'react-slick';

 <div className="department_swiper">
        <Swiper
          spaceBetween={48}
          slidesPerView="auto"
          onSlideChange={(swiper) => {
            const { realIndex, clickedIndex, activeIndex } = swiper;
            console.log('真实索引下标===>', { realIndex, clickedIndex, activeIndex });
            setActiveBg(bgList[realIndex]);
            setSelectedIndex(0);
          }}
          onSwiper={(el) => {
            // 初始化滑动到对应位置
            if (queryData[BG]) {
              const ind = bgList.findIndex((item) => item.code === queryData[BG]);
              el.slideTo(ind, 1000, false);
            }
          }}
          loop
          loopFillGroupWithBlank
          navigation
          // @ts-ignore
          modules={[Navigation]}
          centeredSlides
          slidesOffsetBefore={30}
          slidesOffsetAfter={30}
          slideToClickedSlide
          className="mySwiper"
        >
          {Array.isArray(bgList) &&
            bgList.length > 0 &&
            bgList.map((item) => (
              <SwiperSlide key={item.code}>
                <img src={item.logoUrl} alt="" />
                <p className="bg_name">{item.name}</p>
                {item.bgOrigin && <div className="bg_origin">({item.bgOrigin})</div>}
              </SwiperSlide>
            ))}
        </Swiper>
      </div>