vue2中使用swiper实现一个轮播图

效果图:

实现步骤：

1.下载swiper

npm i swiper@5.x vue-awesome-swiper@4.1.1 -S

2.引入html结构

<div class="homeCon1">
   <div class="homeCon1-banner">
     <div class="bannerLeft">
       <div class="index-fit">
         <div class="fit-h1">新闻中心</div>
         <p>NEWS CENTER</p>
         <div class="more-btn">查看更多</div>
         <!-- 下一页 -->
         <div class="swiper-button-next" slot="button-prev"></div>
         <!-- 上一页 -->
         <div class="swiper-button-prev" slot="button-next"></div>
       </div>
     </div>
     <div class="bannerRight">
       <swiper ref="mySwiper" :options="swiperOption">
         <swiper-slide v-for="(item, index) in 6" :key="index">
           <div class="pit-box">slide{{index}}</div>
         </swiper-slide>
         <!-- 分页器 -->
         <div slot="pagination" class="swiper-pagination">
           <span class="swiper-pagination-current"></span><span>"/"</span><span class="swiper-pagination-total"></span>
         </div>
       </swiper>
     </div>
   </div>
</div>

3.在使用的页面引入swiper并注册

//引入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

//注册
 components: {
   Swiper,
   SwiperSlide,
 }

4.在data中配置swiperOption

swiperOption: {
    // 衔接滑动
    loop: true,
      // 自动滑动
      autoplay: {
        delay: 2000,
          stopOnLastSlide: false,
            disableOnInteraction: false,
      },
      slidesPerView: 3,
      paceBetween: 20,
      slideToClickedSlide: true,
      // 使用前进后退按钮来控制Swiper切换。
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    	},
      pagination: {
        el: '.swiper-pagination', //与slot="pagination"处 class 一致
        clickable: true,
        type: 'fraction',
     },
  },

5.其他配置项可参考swiper官网

​​https://www.swiper.com.cn/api/pagination/448.html​