Swiper中文网 https://www.swiper.com.cn/demo/web/index.html
Swiper英文网 https://swiperjs.com/
image.png

react

https://swiperjs.com/react

  1. npm i swiper
  2. // Import Swiper React components
  3. import { Swiper, SwiperSlide } from 'swiper/react';
  5. // Import Swiper styles
  6. import 'swiper/swiper.scss';
  8. export default () => {
  9.   return (
  10.     <Swiper
  11.       spaceBetween={50}
  12.       slidesPerView={3}
  13.       onSlideChange={() => console.log('slide change')}
  14.       onSwiper={(swiper) => console.log(swiper)}
  15.     >
  16.       <SwiperSlide>Slide 1</SwiperSlide>
  17.       <SwiperSlide>Slide 2</SwiperSlide>
  18.       <SwiperSlide>Slide 3</SwiperSlide>
  19.       <SwiperSlide>Slide 4</SwiperSlide>
  20.       ...
  21.     </Swiper>
  22.   );
  23. };

Swiper移动端

Swiper移动端案例 https://www.swiper.com.cn/demo/senior/index.html
image.pngimage.pngimage.png
image.pngimage.png

SwiperPC端轮播图

https://www.swiper.com.cn/demo/web/index.html
Swiper案例参考 https://www.jq22.com/search?seo=swiper

Swiper Tab

https://www.jq22.com/jquery-info11179
https://www.jq22.com/demo/swiperTab20161204/
image.png

https://www.jq22.com/yanshi10147

https://www.cnblogs.com/heyiming/p/6739878.html
https://blog.csdn.net/joy1793/article/details/109389548
image.png

Swiper Card卡片

https://www.jq22.com/jquery-info21632
在线案例 https://www.jq22.com/demo/swiperlbt201905292344/
image.png

产品切换 Tab选项卡
https://www.jq22.com/yanshi14668
image.png

Swiper全屏轮播图

https://www.jq22.com/yanshi22336
image.png

Swiper时间轴

https://www.jq22.com/jquery-info22242