React开发移动端中,Swiper实现中间显示一个，两侧大的露出一部分

最新推荐文章于 2025-11-23 13:19:59 发布

原创最新推荐文章于 2025-11-23 13:19:59 发布 · 916 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #swiper

部署运行你感兴趣的模型镜像

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import styles from "./index.module.css";

function SwiperDemo() {
  return (
    <Swiper
      modules={[Autoplay]}
      slidesPerView={"auto"}
      centeredSlides={true}
      spaceBetween={20}
      className={styles.my_swiper} // 添加自定义的类名
      autoplay={{
        delay: 3000,
      }}
    >
      {/* 这里放置你的轮播项 */}
      <SwiperSlide className={styles.my_slide}>Slide 1</SwiperSlide>
      <SwiperSlide className={styles.my_slide}>Slide 2</SwiperSlide>
      <SwiperSlide className={styles.my_slide}>Slide 3</SwiperSlide>
    </Swiper>
  );
}

export default SwiperDemo;

.my_swiper {
    width: 100%;
    /* 设置容器宽度 */
    height: 200px;
    /* 设置容器高度 */
}

.my_slide {
    width: calc(100% - 80px);
    /* 设置轮播项宽度，减去两侧露出的宽度和间隙 */
    height: 100%;
    /* 设置轮播项高度 */
    background-color: #ccc;
    /* 设置轮播项背景颜色 */
    border-radius: 10px;
    /* 设置轮播项圆角 */
}