如何在vue中用Swiper插件，生成轮播图

原创已于 2022-10-19 10:10:57 修改 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-10-19 10:06:02 首次发布

本文介绍了如何在Vue项目中使用Swiper插件创建响应式轮播图，包括官网资源、版本选择、下载安装、代码实现、样式调整以及注意事项。适合初学者和开发者快速上手Swiper6+在Vue中的应用。

首先，swiper插件的官方网站为：https://www.swiper.com.cn/，其中包括了如何使用，如何更改轮播图样式的方法，后面遇到问题可以查swiper官网的API文档。
vue2推荐用Swiper5，vue3+推荐用Swiper6+。但注意，Swiper7默认容器是’.swiper’，而Swiper6一下使用的则是’swiper-contanier’。

下载Swiper包

npm install swiper@5

导入swiper

<script>
  import Swiper from 'swiper'
  import 'swiper/css/swiper.min.css'

  export default {
    name: "Swiper",
    props: {
      banner: {
        type: Array,
        default: null
      }
    },
    //因为axios请求图片资源是异步请求，而mounted是同步的生命周期，所以不加  的话去运行会没有js功能,
    //所以需要在更新完毕banner之后，再进行js初始化
    updated() {
      new Swiper('.swiper-container', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        /*         scrollbar: {
                  el: '.swiper-scrollbar',
                }, */
        //自动切换
        autoplay: true,
        //触摸比例
        touchRatio: 2,
      })
    },
  }
</script>

使用Swiper

<template>
  <div class="swiper-main">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in banner" class="swiper-slide">
          <a :href="item.link"> <img :src="item.image" alt=""></a>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!--       <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>

调整Swiper样式

<style>
  .swiper-container {
    display: flex;
    margin: 0 auto;
    --swiper-navigation-color: #666;
    --swiper-navigation-size: 20px;
    --swiper-pagination-color: #ff5777;

  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    display: table-cell;
    text-align: center;
  }
</style>

效果图

请添加图片描述