vue中使用vue-awesome-swiper

一、安装：

npm install swiper vue-awesome-swiper@3.1.3 --save

package.json中：

 

 

 

二、引入：

　main.js中：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper);

 

三、使用：

   swiper.vue页面中：

 

 ①页面

<!-- Swiper -->
<div class="slider-box">
     <swiper :options="swiperOption" >
         <swiper-slide :key="item.id" v-for="item in workImgList" style="height:134px">
             <img :src="item.imgUrl" style="width:100%;height:100%">
         </swiper-slide>
     </swiper>
     <div class="swiper-button-next" slot="button-next"></div>
     <div class="swiper-button-prev" slot="button-prev"></div>
</div>

②配置项

swiperOption: {
   loop: true,
   autoplay:{
     delay: 3000,
     stopOnLastSlide: false,
　　　disableOnInteraction: false
　　},
   slidesPerView: 4,
   spaceBetween: 40,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
}

// this.workImgList = res[4].rows  // 工作图片

   this.workImgList = [

          {

              id:1,

              imgUrl:require('../../assets/images/gzfw1_01.png')

          },

          {

              id:2,

              imgUrl:require('../../assets/images/cs1.jpg')

          },

          {

              id:3,

              imgUrl:require('../../assets/images/cs2.jpg')

          },

          {

              id:4,

              imgUrl:require('../../assets/images/gzfw1_01.png')

          },

          {

              id:5,

              imgUrl:require('../../assets/images/cs1.jpg')

          },

          {

              id:6,

              imgUrl:require('../../assets/images/cs2.jpg')

          },

   ],

   this.getData()

getData(){

        var loops = true

        this.workImgList.length <= 4 && (loops = false)

        this.swiperOption = {

          loop: loops,

          autoplay:{

            delay: 3000,

            stopOnLastSlide: false,

  　　　　　 disableOnInteraction: false

  　　　　 },

          slidesPerView: 4,

          spaceBetween: 40,

          navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

          }

        }

},

③样式

.slider-box{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.swiper-button-next{right: -65px;background: url(../../assets/images/right.png) no-repeat center;background-size: 100% 100%;}
.swiper-button-prev{left: -65px;background: url(../../assets/images/left.png) no-repeat center;background-size: 100% 100%;}
.swiper-button-next:focus{outline: none;}
.swiper-button-prev:focus{outline: none;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
  content: '';
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
  content: '';
}　

 

.swiper-button-next:focus{outline: none;}   .swiper-button-prev:focus{outline: none;} 是用来清除点击按钮显示的外黑框。

类似问题：

/* 去除点击选项卡时出现的蓝色边框 */
.swiper-pagination .swiper-pagination-bullet:focus {
outline: none;
}

/* 去除点击选项卡时出现的蓝色背景 */
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: auto;
}