vue脚手架使用swiper

vue脚手架使用swiper

第一步 先安装

cnpm install swiper@3 vue-awesome-swiper@3 --save-dev
第二步复制到main.js里面

```javascript
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

第三步复制到 return

```javascript
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
          clickable: true
        },
      }

第四步复制到html里面 一下图片自己更改 样式可以自己设置

    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide><img
          src="https://img0.baidu.com/it/u=4283523261,3615620844&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691168400&t=e937016b92657a1f22812e4211427e50"
          alt=""></swiper-slide>
      <swiper-slide><img
          src="https://img2.baidu.com/it/u=1444024164,3406292138&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691168400&t=0f16587091c5ba8ab29adc07744daaab"
          alt=""></swiper-slide>
      <swiper-slide><img
          src="https://img2.baidu.com/it/u=1641828114,2749318712&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt=""></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

看一下效果吧