轮播图-实现中间大两边小的轮播图

使用Swiper创建带动画效果的轮播图

最新推荐文章于 2025-10-10 16:56:57 发布

原创最新推荐文章于 2025-10-10 16:56:57 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文展示了如何使用Swiper库创建一个带有动画效果的轮播图，包括设置幻灯片间距、视图数量、居中显示、循环播放等功能。通过CSS样式控制了滑动过渡和激活状态下的缩放效果，增强了用户体验。

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

import SwiperCore, {Pagination} from 'swiper';
import {Swiper, SwiperSlide} from "swiper/react";
import "swiper/swiper.less";
import "swiper/swiper-bundle.min";
import "swiper/swiper-bundle.min.css";


<Swiper
  spaceBetween={-60}//幻灯片之间的距离
  slidesPerView={3} //视图幻灯片数量
  centeredSlides={true} //活动幻灯片将居中
  loop={true} // 是否循环
  className={'mySwiper2'}
>
  {imgDataFour.map((e, i) => {
    return (
      <SwiperSlide key={i}>
        <img src={e} alt={e}/>
      </SwiperSlide>
    );
  })}
</Swiper>

css样式

.mySwiper2 {
  position: relative;
  width: 100%;
  height: 350px;

  .swiper-slide {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
  }

  .swiper-slide-active, .swiper-slide-duplicate-active {
    transform: scale(1.1);
    z-index: 999;
  }
}

您可能感兴趣的与本文相关的镜像