vue项目中使用swiper实现中间大,两边小的轮播图-Js中文网

前言

项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来

下面我们来看下实现步骤：

第一步：首先在项目index.html中引入swiper的css文件-swiper.min.css
第二部：写入dom结构

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div
      v-for="(item, i) in pictures"
      :key="i"
      class="swiper-slide"
    >
      <!-- 具体内容 -->
      <img
        :src="item.advertiseImages"
        alt="商品图片"
      >
    </div>
  </div>
</div>

第三步：在项目中使用npm安装swiper模块

npm install swiper --save-dev

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

第四步：在vue文件中引入，并初始化swiper；
先引入swiper

import Swiper from "swiper";

注意初始化需要放入mounted钩子中哦

import Swiper from "swiper";

export default {
    data() {
        return {
        }
    },
    mounted() {
        var mySwiper = new Swiper(".swiper-container", {
            direction: "horizontal",
            loop: false,
            slidesPerView: "auto",
            centeredSlides: true,
            spaceBetween: 20,
            observer: true,
            observeParents: true
        });
    }
}

如果你的项目中，图片是从后台接口获取，那么上面的初始化可能会出问题，这个时候我们采取另外的方式初始化swiper

import Swiper from "swiper";

export default {
    data() {
        return {
            mySwiper: null
        }
    },
    methods: {
        getdata() {
            promise.then(res => {
                this.pictures = res.images || [];
                this.$nextTick(() => {
                    this.initSwiper();
                });
            });
        },
        initSwiper() {
            this.mySwiper = new Swiper(".swiper-container", {
                direction: "horizontal",
                loop: false,
                slidesPerView: "auto",
                centeredSlides: true,
                spaceBetween: 20,
                observer: true,
                observeParents: true
            });
        }
    }
}

把swiper的初始化放入vue的nextTick中执行，就解决掉问题啦
+ 第五步：如果想获取当前滚动到哪一张图片怎么办呢