vue中实现轮播图效果

安装swiper 和 vue-awesome-swiper

npm i swiper vue-awesome-swiper -S

template

引入组件和css

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

data数据

data() {
    return {
      swiperOptions: {
        loop: true,
        speed: 2000,
        autoplay: {
          delay: 3000,

          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },

注册子组件

components: {
    swiper,
    swiperSlide,
  }

style样式

.swiper-container {
        background: #f00;
   }
.swiper-slide {
        height: 150px;
   }