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制作轮播图：
如下可以复制到组件中尝试：
模板代码
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'
}
}
js实现轮播图最简代码}
}
}
</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>
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
结果图：
总结：
在前端学习过程中，使⽤插件开发会遇到各种版本的问题，这种轮播图⽤简单的css就可以实现的，花时间去使⽤别⼈的组件是得不偿失的，swipper这种复⽤性不⾼，之前使⽤的element ui可以帮助我们节省很多时间去设计样式，对后端⼈员来说帮助很⼤。
js对前端学习的⼈来说⾮常重要，⽽且难度也是最⼤的。
之后我会对js⼀些难点做⼀些总结和归纳。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。