vue2项目中使用轮播图

1.  npm  i  swiper

2.在组件中引用:

import Swiper from "swiper";

import "swiper/css/swiper.css";

3.在组件中的代码

<template>

  <div class="swiper_box">

    <div class="swiper-container" ref="Swiper">

      <div class="swiper-wrapper">

        <div

          class="swiper-slide"

          v-for="(item, index) in bannerList"

          :key="item.id"

        >

          <img :src="item.imgUrl" />

        </div>

      </div>

      <!-- 如果需要分页器 -->

      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->

      <div class="swiper-button-prev"></div>

      <div class="swiper-button-next"></div>

    </div>

  </div>

</template>

<script>

import Swiper from "swiper";

import "swiper/css/swiper.css";

export default {

  name: "Carousel",

  data() {

    return {

      bannerList: [

        {

          id: 1,

          imgUrl:

            "https://img1.baidu.com/it/u=307074048,654359288&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",

        },

        {

          id: 2,

          imgUrl:

            "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",

        },

        {

          id: 3,

          imgUrl:

            "https://img1.baidu.com/it/u=3007048469,3759326707&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",

        },

        {

          id: 4,

          imgUrl:

            "https://img2.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",

        },

      ],

    };

  },

  mounted() {

    var mySwiper = new Swiper(this.$refs.Swiper, {

      direction: "horizontal", // 水平切换选项

      loop: true, // 循环模式选项

      // 如果需要分页器

      pagination: {

        el: ".swiper-pagination",

        //分页器类型

        type: "bullets",

        //点击分页器，切换轮播

        clickable: true,

      },

      //自动轮播

      autoplay: {

        delay: 100,

      },

      autoplay: true, //等同于以下设置

      // 如果需要前进后退按钮

      navigation: {

        nextEl: ".swiper-button-next",

        prevEl: ".swiper-button-prev",

      },

    });

  },

};

</script>

<style lang="less" scoped>

.swiper_box {

  width: 100%;

  height: 100%;

  .swiper-container {

    width: 60%;

    height: 40%;

    .swiper-slide {

      width: 100%;

      height: 100%;

      img {

        width: 100%;

        height: 100%;

      }

    }

  }

}

</style>