在vue2、vue3 中swiper的使用

中文官网地址：
https://www.swiper.com.cn/api/effects/193.html

第一篇：vue3.2 中使用swiper

vue3中使用swiper，对应版本为7-8
7和8有些细微差异

1、安装

npm i swiper -S        //默认安装的最新版

"swiper": "^8.3.2",
"vue": "^3.2.25",

2、 .vue页面

 <swiper
     class="swiper-container"
      :modules="modules"
      :effect="'fade'"  //渐显渐隐
      :autoplay="autoplayOptions"
      :pagination="{ clickable: true }"   //点击小圆点可切换轮播
      :pagination="true"   //点击小圆点不可以切换轮播
      @swiper="onSwiper"
      @slideChange="onSlideChange">
      <swiper-slide class="swiper-slide" v-for="(item,i) in state.swiperMsg" :key="i">
          <div class="swiper_title">
              <span >{{item.msg}}</span>
              <p>
                  <span>{{item.detail1}}</span>
                  <span>{{item.detail2}}</span>
                  <span>{{item.detail3}}</span>
              </p>
              <el-button class="swiper_btn" type="primary"  @click="toTreasury">{{item.btn}}</el-button>
          </div>
          <img :src="item.img" alt=""/>
      </swiper-slide>
</swiper>

3、script 中引入

<script setup lang=ts>
	import { Swiper, SwiperSlide } from 'swiper/vue';
	import 'swiper/css';
	import "swiper/css/effect-fade";   //渐显渐隐
	import 'swiper/css/pagination';    //小圆点分页
	import {  Pagination, EffectFade,Autoplay } from 'swiper';
	const modules = [Pagination, EffectFade,Autoplay ]
	const onSwiper = (swiper) => {
        console.log(swiper);
	};
	const onSlideChange = () => {
	    console.log('slide change');
	};
	const autoplayOptions = {
	    delay: 1500,
	    disableOnInteraction: false,
	    loop: true,
	    pauseOnMouseEnter: true,
	    reverseDirection: false
	}
</script>

第二篇：vue2中使用swiper

低于6包含6的版本适用于vue2

"swiper": "^6.5.6",

1、分页器由 圆点 改成 长方条

默认样式

此处只需在css中重写样式即可

::v-deep .swiper-pagination-bullet {
        width: 35px;
        height: 4px;
        display: inline-block;
        border-radius: 0px;
    }
::v-deep .swiper-pagination {
    position: absolute;
    text-align: left;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    padding: 2% 10%;
}
::v-deep .swiper-pagination-bullet-active {
    background: #0052D9;
}