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

最新推荐文章于 2024-05-10 10:01:53 发布

无穷已_

最新推荐文章于 2024-05-10 10:01:53 发布

阅读量557

点赞数 1

文章标签： react.js 前端 swiper

本文链接：https://blog.csdn.net/About_zero/article/details/131878736

版权

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;
    /* 设置轮播项圆角 */
}