Vue如何使用vue-awesome-swriper实现异形轮播_vue 异形轮播图-优快云博客

本文介绍了如何在Vue项目中利用vue-awesome-swiper库实现具有独特布局的轮播图，详细步骤包括安装组件、在main.js配置以及在.vue文件中编写代码。

vue 使用swriper（5.0）实现轮播图（slide异形轮播为列）步骤如下：

安装：vue-awesome-swiper

npm / cnpm i vue-awesome-swiper --save

`在入口文件 main.js中执行如下操作

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3，在自己的 .vue文件中代码块

<template>
  <div>
    <swiper :options="swiperOption"  ref="mySwiper">
        <!-- 添加的图片 -->
        <swiper-slide>
          <img class="swiper-slide" src="../../images/gallery/events1.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img class="swiper-slide " src="../../images/gallery/events2.jpg"/>
        </swiper-slide>
        <swiper-slide>
          <img class="swiper-slide " src="../../images/gallery/events3.jpg"/>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    </div>
</template>

<script>
export default {
  name: 'carrousel',
  data () {
    return {
      swiperOption: {
      //可见图片张数
        slidesPerView: 3,
       // 默认选中中间一张
        centeredSlides: true,
        //无限循环
        loop: true,
        //小圆点（我此处没使用，列出供参考）
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }，
        //自动轮播
        autoplay: {
          stopOnLastSlide: true
        },
        //上下按钮点击轮播效果
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style>
.swiper-slide{
      transition:1s;
      transform: scale(0.85);
    }
    //swriper自带的类名（选中时的样式）
    .swiper-slide-active,.swiper-slide-duplicate-active {
        transform: scale(1.1);
    }
</style>

想要了解更多轮播效果请点击添加链接描述