swiper的使用（react)

最新推荐文章于 2023-02-20 16:02:52 发布

HaanLen

最新推荐文章于 2023-02-20 16:02:52 发布

阅读量186

点赞数

分类专栏： React全家桶系列文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40119412/article/details/128077798

版权

React全家桶系列专栏收录该内容

49 篇文章 13 订阅

订阅专栏

npm i swiper

import { Swiper, SwiperSlide } from "swiper/react";
// import required modules
import { Pagination, Navigation } from "swiper";

// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import './index.less';

export default function Case(props) {
  return (
    <div className="case">
      <Swiper
        slidesPerView={5}
        spaceBetween={10}
        slidesPerGroup={1}//分组
        centeredSlides={true}//选中的item居中
        loop={true}
        loopFillGroupWithBlank={true}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </div>
  )
}

.case {
  height: 300px;

  .swiper {
    width: 100%;
    height: 290px;
  }
  .swiper-wrapper {
    align-items: center;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    // box-shadow: 0 4.25101px 17.004px rgb(128 146 181 / 8%);
  }

  .swiper-slide-active {
    // height: 220px;
    // transform: scale(1.3);
    // transition: .3s;
  }
  .swiper-pagination-bullet {
    height: 8px;
    width: 32px;
    box-shadow: inset 0 4px 4px rgb(0 0 0 / 11%);
    border-radius: 2px;
  }
}