nuxt使用vue-awesome-swiper实现自动控制显示个数的轮播图

image.png

展示轮播及缩略图

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.使用

        
        

          

            

              

                

                  
                
              
              

              

                
              
              

                
              
            
          
        
      

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;
}