下载依赖
npm install vue-awesome-swiper --save
挂载依赖
全局挂载依赖
main.js
里面
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper);
源码
<template>
<div class="home">
<div class="box">
<swiper :options="swiperOption" ref="mySwiper">
<!-- 添加的图片 -->
<swiper-slide>
<img class="swiper-slide"
src="https://img0.baidu.com/it/u=910370653,1586755534&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=334" />
</swiper-slide>
<swiper-slide>
<img class="swiper-slide "
src="https://img2.baidu.com/it/u=3908142881,2459234098&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" />
</swiper-slide>
<swiper-slide>
<img class="swiper-slide "
src="https://img1.baidu.com/it/u=2921329287,1077941277&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500" />
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'carrousel',
data () {
return {
swiperOption: {
//可见图片张数
slidesPerView: 2.3,
// 默认选中中间一张
centeredSlides: true,
spaceBetween: 10,
//无限循环
loop: true,
//小圆点(我此处没使用,列出供参考)
pagination: {
// el: '.swiper-pagination',
clickable: true
},
//自动轮播
autoplay: {
stopOnLastSlide: true
},
//上下按钮点击轮播效果
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
}
}
</script>
<style scoped>
.box {
width: 700px;
border: 1px solid red;
}
.swiper-container {
/* width: 500px; */
background: #ccc;
transform: scaleX(0.5);
}
.swiper-slide {
transition: 1s;
transform: scale(0.85);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1.1);
}
</style>
效果如下
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!