vue-awesome-swiper使用

安装

地址

npm install swiper vue-awesome-swiper --save

// "vue-awesome-swiper": "^4.1.1",
/ "swiper": "^5.2.0",

• 全局配置

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

• 局部配置

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

使用

<template>
      <div class="advertising">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in urls" :key="item">
            <img :src="item" alt="广告图片">
          </swiper-slide>
        </swiper>
      </div>
</template>
<script>
import { Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
   data() {
    return {
      urls: [
        'https://i.loli.net/2021/03/04/R68KsWLuoqDy4US.jpg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://i.loli.net/2021/03/04/3LtzK72GNB8dHvI.jpg',
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      ],
      swiperOptions: {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        loop: false,
        direction: 'vertical',
        slidesPerView: 'auto',
      }
    }
  },
}
</script>
<style lang="scss">
.advertising {
  position: absolute;
  right: 1%;
  top: 100px;
  bottom: 20px;
  width: 250px;
  .swiper-container {
    height: 100%;
  }
  .swiper-slide {
    width: 100%;
    height: 25%;
  }
  .swiper-slide img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* line-height: 200px; */
    background-color: lightblue;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
  }
}
</style>