插件1

下载swiper

首先使用npm 或者cnpm下载swiper
cnpm install swiper

引入swiper

import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;

使用swiper

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../../static/images/ad1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad3.jpg" alt="">
      </div>
    </div>
  </div>

mounted里面调用

    mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:true,
          loop:true
        })
      },

插件2

vue-awesome-swiper的使用

1、安装

npm install vue-awesome-swiper --save-dev

2、在vue中引入

    进入maim.js文件
    import vueSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(vueSwiper)

3、进入轮播图组件中

<swiper :options="swiperOption">
            <swiper-slide class="swiper-slide" >
                <div>
      <ul>
        <li>
          <div>
            <div>
              <img src="http://p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png" />
            </div>
            <div>火锅</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png" />
            </div>
            <div>甜点饮品</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p1.meituan.net/codeman/962b082a549e88f2939dbee2ac3d235613019.png" />
            </div>
            <div>自助餐</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p0.meituan.net/codeman/12ff749bd7fdf473abd59e2651a9ee1913684.png" />
            </div>
            <div>小吃快餐</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p0.meituan.net/codeman/0fe84029cc6cf6ccf12838ce6546734a16488.png" />
            </div>
            <div>西餐</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p0.meituan.net/codeman/2ae734d26259e6138ea61f2dcdac8fa115018.png" />
            </div>
            <div>烧烤肉肉</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p1.meituan.net/codeman/a7c360a9aeca1f972a1819465154c6b414043.png" />
            </div>
            <div>香锅烧烤</div>
          </div>
        </li>
        <li>
          <div>
            <div>
              <img src="http://p1.meituan.net/codeman/13a0d1537d45b237a07b665eb5a7845e17141.png" />
            </div>
            <div>海鲜</div>
          </div>
        </li>
      </ul>
    </div>
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>   
             <!-- 左右箭头 --> 
            <div class="swiper-button-prev" slot="button-prev"></div> 
            <div class="swiper-button-next" slot="button-next"></div> 
        </swiper>




<script>
    export default {
        data(){
            return {
                swiperOption:{
                    //显示分页
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    //设置点击箭头
                    navigation: {
                      nextEl: '.swiper-button-next', 
                      prevEl: '.swiper-button-prev'
                    },
                    //自动轮播
                    autoplay: {
                      delay: 2000,
                      //当用户滑动图片后继续自动轮播
                      disableOnInteraction: false,
                    },
                    //开启循环模式
                    loop: true
                }
            }
        }
    }
</script>