1.第一步:下载
npm i swiper
2。第二步:使用
默认情况下,Swipler反应使用刷的核心版本(没有任何附加模块)。如果想使用导航、分页和其他模块,您必须首先引入它们。在Swiper标签中添加module属性,增加模块。具体的可以参照swiper官网~css样式也可以参照swiper官网
swiper可以在原生js中使用,还可以在react,vue等框架中使用
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
export default () => {
// Now you can use Swiper
return (
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
);
};
swiper官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发