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>
  1. main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

结果图:
vue2中使用swiper插件制作轮播图

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

上一篇:Vue2中使用vue-awesome-swiper3(对应swiper4)


下一篇:MATLAB马赛克图像处理