vue-awesome-swiper 安装轮播图手指控制图片放大缩小

最新推荐文章于 2026-04-23 05:20:28 发布

原创最新推荐文章于 2026-04-23 05:20:28 发布 · 2.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

样式CSS

vue-awesome-swiper

本文详细介绍了如何在Vue项目中使用vue-awesome-swiper插件实现轮播图功能，包括安装、配置和使用方法。同时，还提供了如何通过代码实现图片的放大和缩小效果，附带完整代码示例。

安装：

npm install vue-awesome-swiper --save

main.js中添加

全部引用

import vueSwiper from 'vue-awesome-swiper' // 引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css' // 引入样式

Vue.use(vueSwiper) // 使用插件

2 组件引用

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

轮播图

重点解释一些属性配置：swiperOption
附件：该里面有很多轮播图dome https://surmon-china.github.io/vue-awesome-swiper/


<template>
  <div id="app">
    <div>
      <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
          我是第{{item}}个轮播图
        </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>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      slide: [1, 2, 3, 4, 5],
      //设置属性
      swiperOption: {
        //显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允许分页点击跳转
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next', 
          prevEl: '.swiper-button-prev'
        },
        //自动轮播
        autoplay: {
          delay: 400
        },
        //开启循环模式
        loop: true,
        //开启鼠标滚轮控制Swiper切换
        mousewheel: true
      }
    }
  }
}
</script>

<style>
.swiper-slide {
  width: 100%;
  height: 500px;
  line-height: 500px;
  font-size: 50px;
  text-align: center;
  background-color: rosybrown;
}
</style>

手指控制图片放大缩小

**
直接上代码

<template>
  <div>
    <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
      <swiper-slide v-for="(img, index) in previewImg" :key="index">
        <div class="swiper-zoom-container">
          <img :src="img.img" alt="">
        </div>
      </swiper-slide>
    </swiper>
    <div>jslakfd;lsdsdjsjl;djf;dfjd;j;dj</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      previewImg: [{img: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=318164535,699476945&fm=173&app=49&f=JPEG?w=608&h=434&s=4D702EC548038AD04828ACBF0300C003', dec: 'sdafdas紧急状态”，并承诺明年将会提高最低工资以及不会轻易增税紧急状态”，并承诺明年将会提高最低工资以及不会轻易增税紧急状态”，并承诺明年将会提高最低工资以及不会轻易增税紧急状态”，并承诺明年将会提高最低工资以及不会轻易增税', name: '额', likeNum: '234'},
        {img: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2408850197,1190565763&fm=173&app=49&f=JPEG?w=550&h=310&s=7A3209C5545A13D0CC58B52C0300E050', dec: 'ddddd', name: '吃', likeNum: '234'},
        {img: 'https://www.baidu.com/img/bd_logo1.png?where=super', dec: '时间10日晚，法国总统马克龙宣布法国进入“经济紧急状态”，并承诺明年将会提高最低工资以及不会轻易增税', name: '烦', likeNum: '234'}],
      swiperOption: {
        width: window.innerWidth,
        zoom: true,
        initialSlide: 0
      }
    }
  }
}
</script>

完毕

标签

#轮播图 #vue-awesome-swiper