本文实例为大家分享了vue使用swiper.js重叠轮播组建样式,供大家参考,具体内容如下
& lt; template>
& lt; div类=癮rticle-main”比;
& lt; div类=癮rticle-content”比;
& lt;偷窃者类=巴登哉摺?选项=皊wiperOption”比;
& lt; swiper-slide类=皊wiper-slide”比;
& lt; div类="卡"比;
& lt;跨类=" card-tit "在一起来观看韦斯·安德森的色彩回旋舞& lt;/span>
& lt;跨类=" card-desc "在对称|色彩|构图& lt;/span>
& lt; img类=" card-img " src=" https://www.yisu.com/zixun/@/资产/一/发现/article1.png”alt/比;
& lt;/div>
& lt;/swiper-slide>
& lt; swiper-slide类=皊wiper-slide”比;
& lt; div类="卡"比;
& lt;跨类=" card-tit "在你离英剧里的下午茶,还差了这些& lt;/span>
& lt;跨类=" card-desc "在对称|色彩|构图& lt;/span>
& lt; img类=" card-img " src=" https://www.yisu.com/zixun/@/资产/一/发现/article2.png”alt/比;
& lt;/div>
& lt;/swiper-slide>
& lt; swiper-slide类=皊wiper-slide”比;
& lt; div类="卡"比;
& lt;跨类=" card-tit "在一起来观看韦斯·安德森的色彩回旋舞& lt;/span>
& lt;跨类=" card-desc "在对称|色彩|构图& lt;/span>
& lt; img类=" card-img " src=" https://www.yisu.com/zixun/@/资产/一/发现/article1.png”alt/比;
& lt;/div>
& lt;/swiper-slide>
& lt;/swiper>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“FindArticle”,
数据(){
返回{
swiperOption:{//偷窃者配置
方向:垂直,//滑动方向改为垂直
身高:650//你的幻灯片高度强制性垂直方向生效
循环:真的,//是否循环
效果:' coverflow ',//进出动画
grabCursor:没错,
centeredSlides:没错,
slidesPerView:“汽车”,//longSwipesRatio: 0.2//滑动多少就可以滑动
coverflowEffect: {
slideShadows:真的,//页面阴影效果
旋转:0,//旋转的角度
延伸:500//拉伸图片间左右的间距和密集度
深度:100//深度切换图片间上下的间距和密集度
修饰符:。8,//修正值该值越大前面的效果越明显
}
}
}
}
}
& lt;/script>
& lt;风格lang=皊css”scoped>
.article-main {
宽度:100%;
高度:100%;
溢出:隐藏;
.article-content {
高度:100%;
身高:1000 px;//& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;& # 63;
宽度:100%;
.swiper {
高度:100%;
填充:15 0 px;
box-sizing: border-box;
overflow-y:隐藏;
.swiper-slide {
身高:470 px;
.card {
显示:flex;
flex-direction:列;
对齐项目:中心;
宽度:100%;
身高:470 px;
background - color: # f5f5f5;
.card-tit {
margin-top: 30 px;
宽度:220 px;
字体大小:18 px;
颜色:# 010 e0d;
粗细:600;
}
.card-desc {
保证金:5 px 15 0 px;
字体大小:12 px;
颜色:# 999999;
}
.card-img {
身高:358 px;
宽度:265 px;
}
}
}
}
}
}
& lt;/style>
更多关于轮播图效果的专题,请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
引导轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
