vue 水平卡片式轮播

基于 vue3 + ts 开发的


项目需要完成如上图的轮播,这是水平卡片式轮播。我的项目是基于 vue3+ts 开发的,我使用 swiper 来完成该轮播开发。具体代码如下文


首先安装 swiper

npm install swiper --save
// or
yarn add swiper

html 代码

<template>
<div>
<div class="examples">
<div class="bannerBox">
<div class="swiper-container swiper3">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in banner"
:key="index"
>
<img :src="item.picture_path" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</div>
</div>
</div>
</template>

javascript 代码

<script>
// 有部分没用到你们可以不引用
import Swiper, { Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation } from 'swiper';
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';

export default {
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
data() {
return {
bannerIndex: 0,
banner: [
{
picture_path: require('../../assets/home/home_bg.png')
},
{
picture_path: require('../../assets/home/lunbo.png')
},
{
picture_path: require('../../assets/home/home_bg2.png')
}
]
};
},
mounted() {
let that = this;
let mySwiper = new Swiper('.swiper3', {
direction: 'horizontal', //滑动方向,可设置水平(horizontal)或垂直(vertical)。
loop: true, // 设置为true 则开启loop模式
autoplay: true, // 自动切换时间
speed: 500, // 切换速度
slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto
centeredSlides: true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
spaceBetween: 10, // 在slide之间设置距离(单位px)。
loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
});
},
};
</script>

css 代码

<style lang="scss" scoped>
.examples{
padding: 100px;
}
.bannerTxt{
height: 60px;
line-height: 60px;
text-align: center;
color: #666666;
font-size: 15px;
}
.bannerIndex{
line-height: 40px;
text-align: center;
color: #666666;
font-size: 15px;
text-align: center;
span{
color: #b5654d;
}
}
.bannerBox{
position: relative;
height: 490px;
}
.swiper3 {
width: 100%;
height: 100%;
}
.swiper3 .swiper-wrapper .swiper-slide {
width: 940px !important;
overflow: hidden;
display: flex;
align-items: center;
margin-right: 20px !important;
}
.swiper3 .swiper-wrapper .swiper-slide img {
width: 100%;
height: 490px;
border-radius: 5px;
}
.swiper3 .swiper-wrapper .swiper-slide-prev,.swiper3 .swiper-wrapper .swiper-slide-next{
height: 490px !important;
border-radius: 5px;
background: #000;
// margin-top: 20px;
}
.swiper3 .swiper-wrapper .swiper-slide-prev img,.swiper3 .swiper-wrapper .swiper-slide-next img{
opacity:0.6; filter: alpha(opacity=60);
width: 100%;
height: 100%;
}
.swiper3 .swiper-pagination {
color: #fff;
}
</style>