下载:
npm install vue-awesome-swiper@3.1.3 -S
vue-awesome-swiper 参考网站 https://www.npmjs.com/package/vue-awesome-swiper
注意版本
❓ 下载成功但是swiper 用不了
查阅 https://www.npmjs.com/package/vue-awesome-swiper
版本要对应
Previous versions
Swiper 5-6 vue-awesome-swiper@4.1.1 (vue2)
Swiper 4.x vue-awesome-swiper@3.1.3 (vue2)
Swiper 3.x vue-awesome-swiper@2.6.7 (vue2)
使用
npm install Swiper 4.x vue-awesome-swiper@3.1.3 (vue2) --save
可以使用vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
<template>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
<img :src="slide.imgUrl" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
// bulletClass: 'my-bullet',
},
autoplay: {
delay: 5000,
autoplayDisableOnInteraction: true,
},
speed: 1000,
loop: true,
},
swiperSlides: [
{
id: '001',
imgUrl: 'https://img.tea7.com/0173663_0.jpeg?x-oss-process=image/resize,w_720',
},
{
id: '002',
imgUrl: 'https://img.tea7.com/0166434_0.jpeg?x-oss-process=image/resize,w_720',
},
{
id: '003',
imgUrl: 'https://img.tea7.com/0169413_0.jpeg?x-oss-process=image/resize,w_720',
},
],
}
},
components: {
swiper,
swiperSlide,
},
}
</script>
<style scoped>
::v-deep .swiper-pagination-bullet {
background: #ffffff;
opacity: 1;
}
::v-deep .swiper-pagination-bullet-active {
background: #b0352f;
opacity: 1;
}
</style>