【React】普通H5中Swiper.js的Demo

原创于 2025-06-17 15:02:30 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

Swiper官网：

还有其他的效果Effect可以去官网查看

https://swiperjs.com/swiper-api#scrollbar

// Import Swiper React components
import 'swiper/css';

import Image from '../..';

// import 'swiper/css/coverflow-effect';
import { EffectCoverflow, Navigation, Pagination } from 'swiper'; // 导入 Swiper 的模块
import { Swiper, SwiperSlide } from 'swiper/react';

import styles from './index.module.css';


const MyCustomSwiper = () => {
  return (
    <Swiper
      style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
      // effect="coverflow" // 激活 Coverflow 效果
      modules={[Navigation, Pagination, EffectCoverflow]} // 使用导入的模块
      centeredSlides
      slidesPerView={'auto'}
      spaceBetween={-100} // 卡片之间的间隔
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
      // draggable
      coverflowEffect={{
        depth: 100,
        modifier: 1,
        rotate: 50,
        scale: 1,
        slideShadows: false,
        stretch: 10,
      }}
    >
      {[0, 1, 2, 3, 4].map((v, index) => (
        <SwiperSlide key={v}>
          <div
            style={{
              width: '538rpx', // 卡片宽度
              height: '636rpx', // 卡片高度
              backgroundColor: 'red', // 卡片背景色
              borderRadius: '40rpx', // 圆角
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // 阴影效果
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: '120rpx'
            }}
          >
            <Image
              className={styles.demoImageCenter}
              src=""
              width={'240px'} // 调整图像宽度
              height={'240px'}
            />
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default MyCustomSwiper;