Vue2中使用vue-awesome-swiper3（对应swiper4）

最新推荐文章于 2025-09-10 02:06:47 发布

原创最新推荐文章于 2025-09-10 02:06:47 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #javascript

前端专栏收录该内容

28 篇文章

订阅专栏

本文档展示了如何在Vue项目中安装和配置vue-awesome-swiper 3.1.3版本来创建轮播图。内容包括安装步骤、开发文档链接、示例以及具体的源代码展示，详细说明了swiper的配置选项如loop、autoplay、pagination和navigation等，适用于Vue2项目。

1 版本号

vue：2.6.11, vue-awesome-swiper: 3.1.3（对应于swiper4）

一定注意版本号！！！网上有很多都是vue2！

安装vue-awesome-swiper

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

开发文档 https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3

例子 https://github.surmon.me/vue-awesome-swiper/

2 截图

3 源代码


<template>
  <div>
    <swiper v-bind:options="swiperOption">
      <swiper-slide>
        1
        <img src="@/assets/logo.png" />
      </swiper-slide>
      <swiper-slide>
        2
        <img src="@/assets/logo.png" />
      </swiper-slide>
      <swiper-slide>
        3
        <img src="@/assets/logo.png" />
      </swiper-slide>
      <swiper-slide>
        4
        <img src="@/assets/logo.png" />
      </swiper-slide>
      <swiper-slide>
        5
        <img src="@/assets/logo.png" />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },

        // 设置显示的个数
        slidesPerView: 4,
        spaceBetween: 30,
        centeredSlides: true,

        // 3D效果
        effect: 'coverflow',
        grabCursor: true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        },
        
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },

        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },

  mounted() {

  }
};
</script>

<style scoped >

</style>