博客

swiper基本配置

1. 
   安装插件
   

npm i swiper

2. 
   页面引入
   

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, EffectCreative, Scrollbar, A11y } from 'swiper';

3. 
   样式引入
   
   
   可以在项目全局的文件引入css

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

有可能报错文件找不到，也可以引入这样文件

import 'swiper/swiper.min.css';

const SwiperPage = () => {
  const bannerImg = [
        { color: '#f7f7af' },
        { color: "#8585f9" },
        { color: "#ff4a4a" },
        { color: "#ffff5d" },
        { color: "#62f9a6" },
    ]
     return (
        <Layout style={{ backgroundColor: '#ccc' }}>
            <div >
        <Swiper
                loop={true} //设置循环轮播
                className="mySwiper"
                spaceBetween={-200} //设置堆叠轮播，item之间叠的距离
                slidesPerView="auto" //设置显示的数量
                navigation={true} //modules上加了同时要设置为true，才显示
                modules={[Navigation,Pagination,EffectCreative]}
                grabCursor={true}
                effect={'creative'} //modules上加了同时要设置
                centeredSlides={true} // 居中的slide是否标记为active，默认是最左active,这样样式即可生效
                slideToClickedSlide={false} // 点击的slide会居中
                creativeEffect={{
                  prev: {
                    //这里是设置当前item的前一项的具体属性
                    translate: [-200, 0, 0], //偏移量，三个轴，X、Y、Z
                    scale: 0.8, //缩放量
                    // opacity:0.8,//透明度
                    // shadow:true,//是否加阴影
                    //rotate:30,//item旋转角度
                    //origin:'left bottom'//item位于左下还是哪里
                  },
                  next: {
                    //这里是设置当前item的后一项的具体属性，同上面
                    translate: [200, 0, 0],
                    scale: 0.8,
                    // opacity:0.8,
                    // shadow:true,
                  },
                  limitProgress: 2, //显示五个堆叠的最重要的这个属性，后面依次以前面属性等比配置
                  // shadowPerProgress:true,//是否等比配置透明度
                }}
               onClick={(swiper,event) => {
             //点击事件
              //回调函数，当你点击或轻触Swiper 后执行，相当于tap。
              //接受swiper实例和touchend事件作为参数。
              //Swiper5版本之前会有300ms延迟。
                }}
            onTouchEnd={(swiper,event) => {
              //回调函数，当碰触到slider时执行。可选Swiper实例和touchstart事件作为参数。
                }}
                onTouchEnd={(swiper,event) => {
              //回调函数，触摸释放时执行，接受swiper实例和 touchend事件作为参数。（释放即执行）
                }}

              >
                {bannerImg.map((item, index) => (
                  <SwiperSlide key={index} style={{ width: 360 }}>
                    <div
                      onClick={(e) => {
                        swiperClick(e,index)
                      }}
                      className="swiper-img"
                      style={{ backgroundColor: `${item.color}`, width: '100%', height: '100%' }}
                    ></div>
                  </SwiperSlide>
                ))}
              </Swiper>
        </div>
        </Layout>
    )

}
export default SwiperPage;