vue-awesome-swiper 小案例

最新推荐文章于 2025-07-23 09:45:18 发布

原创最新推荐文章于 2025-07-23 09:45:18 发布 · 599 阅读

1 ·

CC 4.0 BY-SA版权

Vue 案例专栏收录该内容

91 篇文章

订阅专栏

本文详细介绍如何使用Vue-awesome-swiper组件在Vue项目中实现图片轮播效果，包括安装、配置及具体代码实现。

最终效果：

安装引入：

npm install vue-awesome-swiper --save

在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Swiperdetails.vue组件中所有内容：

<template>
  <div class="Product-details" >
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item,index) in arrs2" :key="index">
        <img :src="item"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Swiperdetails",
      data() {
        return {
          swiperOption: {
            autoplay: {
              autoplay: 1500,
              disableOnInteraction: false,//放置触摸后自动轮播停止
            },
            pagination: {
              el: '.swiper-pagination',
              type: 'fraction'
            },
            loop:true,
          },
          arrs2:[
            require("../assets/img/details1.jpg"),
            require("../assets/img/details2.jpg"),
            require("../assets/img/details3.jpg"),
            require("../assets/img/details4.jpg"),
            require("../assets/img/details5.jpg"),
          ],
        }
      },
    }
</script>

<style scoped>
  .Product-details{
    width:100%;
    height: 5.66rem;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    font-size: .12rem;
    left:80%;
    bottom: 10%;
    width: .65rem;
    height: .31rem;
    background: #7f7f7f;
    filter:Alpha(opacity=70);
    color: white;
    line-height: .31rem;
    border-radius: 25px;
  }
  .swiper-slide img{
    width: 100%;
    height: 5.66rem;
  }
</style>