展示轮播及缩略图

1.安装

yarn add vue-awesome-swiper --save

2.在plugins下新建swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

3.在nuxt.config.js引入css 和swiper.js

css: [
    'swiper/dist/css/swiper.css',
  ],
plugins: [
    { src: '~/plugins/swiper.js', ssr: false },
  ],

4.使用

<div class="honor-img">
        <!--公司荣誉-->
        <div v-if="banners.length > 0" class="md-card">
          <div class="md-card-media">
            <div
              ref="swiperBox"
              v-swiper:swiper="swiperOption"
              class="swiper swiperBox swiper-container swiper-container-virtual swiper-container-horizontal"
              @mouseenter="stopSwiper"
              @mouseleave="startSwiper"
            >
              <div class="swiper-wrapper">
                <div
                  v-for="(banner, i) in banners"
                  :key="i"
                  class="swiper-slide"
                >
                  <img :src="banner" />
                </div>
              </div>
              <div
                slot="pagination"
                class="swiper-pagination"
                style="display: none"
              />
              <div slot="button-prev" class="swiper-button-prev qh-btn h-prev">
                <i class="el-icon-arrow-left honor-arrow icon-prev"></i>
              </div>
              <div slot="button-next" class="swiper-button-next qh-btn h-next">
                <i class="el-icon-arrow-right honor-arrow icon-next"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

data() {
    return {
    //配置
      swiperOption: {
        loop: true, // 循环滚动
        speed: 500,
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        slidesPerView: 5,
        // centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange() {},
          tap() {}
        },
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        autoplayDisableOnInteraction: false,
        // effect:'cube',
        mousewheel: true,
        preloadImages: false,
        lazy: true
      }
    }
  },

methods: {
    stopSwiper() {
      this.swiper.autoplay.stop()
    },
    startSwiper() {
      this.swiper.autoplay.start()
    }
  }

css

.honor-img .swiper-slide {
  width: 221px!important;/*swper会根据显示的个数自动调整宽度，所以我这里自己加了个宽度*/
  height: 160px;
  margin-right: 20px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  overflow: hidden;
  background-color: #f9fafa;
  border: solid 1px #ececec;
}
.honor-img .swiper-slide img {
  max-width: 220px;
  height: 160px;
  object-fit: scale-down;
}
.honor-img .honor-arrow {
  position: relative;
}
.honor-img .icon-prev {
  left: -9px;
  top: -4px;
}
.honor-img .icon-next {
  right: 0px;
}
<style>
.honor-img .el-icon-arrow-left:before,
.honor-img .el-icon-arrow-right:before {
  color: #fff;
}
.honor-img .el-icon-arrow-right {
  margin-top: 15px;
}
.honor-img .el-carousel__item {
  width: 220px;
  height: 160px;
}
</style>