react swiper 基本使用指南 (长期更新案例代码,也可以联系提供代码)

swiper 版本非常多,所以如果大家引入的资源如果报错或者找不着,那么必定是版本不对啦。

官网案例,如果找不到模块,那么就是版本不对的坑了。自己去node_module里面去看看文件是否存在。

安装 npm i swiper
案例安装的版本号是 "swiper": "^8.0.7",


import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

swiper react 官方文档。

api简单介绍

spaceBetween:间距;slidesPerView:展示几个滑块;onSlideChange滑动监听;
Navigation:就是左右两个耳朵,加了这个属性就会有样式,在modules对象数组里添加Navigation,会绑定事件和方法,控制左右切换。
pagination:就是下面的小圆点指示器,同理添加这个属性和对应的css,就会有样式出现,添加到modules对象数组里面就会绑定方法。
这里就是简单的介绍了,我用的swiper版本是8.0,react要16.8,有hooks的就行。
=========================================================

案例一 EffectCoverflow使用特效。

1650786959(1).jpg
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import { Navigation, Pagination, EffectCoverflow, Autoplay } from "swiper"
// Import Swiper styles
import "swiper/css"
import "swiper/scss/navigation"
import "swiper/scss/pagination"
import "swiper/scss/effect-fade"
import styles from "./swiperComBox.module.scss"
// Navigation
export const SwiperComp = (props) => {
  return (
    <Swiper
      modules={[Navigation, Pagination, EffectCoverflow, Autoplay]}
      spaceBetween={50}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      onSlideChange={() => {}}
      onSwiper={(swiper) => console.log(swiper)}
      className={styles.swiper}
      effect={"coverflow"}
      coverflowEffect={{
        rotate: 60,
        stretch: 1,
        depth: 20,
        modifier: 1,
        slideShadows: true,
      }}
    >
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
    </Swiper>
  )
}


引入样式文件
import styles from "./swiperComBox.module.scss"

.swiper {
  width: 80%;
  padding: 10%;
  .slide {
    img {
      width: 100%;
    }
  }
}

使用组件

import {SwiperComp} from "../../components/swiperComBox/swiperComBox"
//这里引用的路径自己写自己的,然后组件的使用也自己放到对应的地方  
//这里imgList属性是自己定义的props  图片路径也自己引入就可以展示了。
<SwiperComp imgList={[yitong.yitonghaoka]}></SwiperComp>

案例二 基础使用 Navigation Pagination

1650772353(1).jpg
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import { Navigation, Pagination } from "swiper"
import utils from "@/util"
import "./videoSwiper.scss"
// Import Swiper styles
import "swiper/css"
import "swiper/scss/navigation"
import "swiper/scss/pagination"
import "swiper/scss/effect-fade"

export  const SwiperComp = (props) => {
  const ClickVideo = (url) => {
    if (url) {
      setUrl(url)
    }
  }
  const { setUrl } = props
  const list = [
    { img: "", url: "https://musclefeel.oss-cn-beijing.aliyuncs.com/testDemo/demo.m3u8" },
    { img: "", url: "https://musclefeel.oss-cn-beijing.aliyuncs.com/video/2022-02-27/output2022_/output2022_.m3u8" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
  ]

  return (
    <Swiper modules={[Navigation, Pagination]} spaceBetween={60} slidesPerView={4} navigation pagination={{ clickable: true }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)} className="swiper">
      {list.map((item, index) => {
        return (
          <SwiperSlide className="slide" onClick={()=>{
            ClickVideo(item.url)
          }} key={index}>
            <img src={props.imgList[0]} alt=""></img>
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

上面的视频是用了Dpalyer 流媒体m3u8,有兴趣了解的可以私聊我。
具体的功能案例有地址,多看文档吧。

案例三

还没写。。
官网文档案例地址
再次注意,modules 里面要添加,属性要添加,引入要引入。有问题可以联系我~hhh

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容