step 1 安装vue-awesome-swiper、swiper
npm install vue-awesome-swiper -S
npm install swiper -S
step 2
在main.js 全局引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper);
//引入样式才会生效
import 'swiper/css/swiper.css'
step 3
在页面
<template>
<div class="container">
<swiper :options="swiperOption" id="swiper1" class="container-swiper" >
<swiper-slide class="container-swiper-list" v-for="item in reportList" :key="item.report_id" >
<div class="container-swiper-list-item" @click="jump(item.report_url)">
<img class="container-swiper-list-item-img" :src="item.report_img" />
<div class="container-swiper-list-item-text">{{item.report_title}}</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination" style="bottom: -10px"></div>
</swiper>
</div>
</template>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
name: "MediaReport",
components: { swiper, swiperSlide },
data(){
return{
swiperOption: {
direction: 'horizontal',
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
},
slidesPerView: "auto",
// 初始化定位
initialSlide: 1,
centeredSlides:true,
spaceBetween: 20,
// 注意swiper版本写法,不同版本写法不同
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
}
},
}
},
}
<style scoped lang="scss">
.container{
background-color: #ffcb2e;
height: 540px;
&-swiper{
display: flex;
align-items: center;
padding-top: 40px;
height: 350px;
&-list{
width: 360px;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
&-item{
&-img{
width: 288px;
height: 144px;
display: block;
margin: 20px auto;
}
&-text{
color: #482929;
font-weight: 300;
margin: 20px 40px;
}
}
}
}
}
#swiper1 {
width: 100%;
overflow: hidden;
padding: 0 0 10px 0;
}
.swiper-wrapper{
display: flex;
align-items: center;
}
.swiper-container, .swiper-container2 {
width: 100%;
overflow: visible !important;
position: relative;
}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 300px;
border-radius: 10px;
background-color: red;
}
/* 上一张 */
.swiper-container .swiper-wrapper .swiper-slide-prev {
margin-top: 15px;
height: 330px !important;
}
/* 下一张 */
.swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 15px;
height: 330px !important;
}
/* 中间的图片 */
.swiper-container .swiper-wrapper .swiper-slide-active {
}
</style>