Skip to main content

轮播图

三方库推荐

swiper 基本解决大部分场景了

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper.scss";

export default () => {
return (
<div className="container">
<Swiper
className="swiper-container"
slidesPerView="auto"
centeredSlides={true}
>
<SwiperSlide className="card">Slide 1</SwiperSlide>
<SwiperSlide className="card">Slide 2</SwiperSlide>
<SwiperSlide className="card">Slide 3</SwiperSlide>
</Swiper>
</div>
);
};

[WIP]动手实现

功能要点

  • 定时滑动/动画
  • 无缝衔接