本文主要是介绍vue2中使用swiper插件制作轮播图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue2中使用swiper、vue-awesome-swiper制作轮播图

版本问题：

• 非常重要： 版本选错了，运行会报各种bug，很恶心
• 最新版本的swiper6适合在vue3中使用，在vue2中使用会出现很多bug
• 这里使用的swiper和vue-awesome-swiper版本如下：

"vue-awesome-swiper": "^4.1.1",
 "swiper": "^5.4.5",

跟这个类似，vue中使用插件，导入依赖时候需要导入适合的版本，不然容易报错
例如：vue2中使用element ui插件是可以的（"element-ui": "^2.15.5"），
而在vue3中使用elementui则应该导入（"element-plus"）,使用上面的element-ui会报错
还有： 导入sass-loader和sass时候也要导入合适的版本：（ "sass": "^1.26.5", "sass-loader": "^8.0.2",）
下面记录一下如何使用swiper制作轮播图：
如下可以复制到组件中尝试：

模板代码

1. Home.vue

<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</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>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    name: 'Home',
    title: 'Pagination',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
           spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
 .swiper {
  height: 300px;
  width: 100%;
  border: 1px transparent solid;

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background-color: rgb(98, 168, 200);
  }
}
</style>

2. main.js

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

结果图：

总结：
在前端学习过程中，使用插件开发会遇到各种版本的问题，这种轮播图用简单的css就可以实现的，花时间去使用别人的组件是得不偿失的，swipper这种复用性不高，之前使用的element ui可以帮助我们节省很多时间去设计样式，对后端人员来说帮助很大。
js对前端学习的人来说非常重要，而且难度也是最大的。
之后我会对js一些难点做一些总结和归纳。

这篇关于vue2中使用swiper插件制作轮播图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！