您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了vue使用swiper.js重疊輪播組建樣式,供大家參考,具體內(nèi)容如下
<template> <div class="article-main"> <div class="article-content"> <swiper class="swiper" :options="swiperOption"> <swiper-slide class="swiper-slide"> <div class="card"> <span class="card-tit">一起來(lái)觀看 Wes Anderson的色彩回旋舞</span> <span class="card-desc">對(duì)稱 | 色彩 | 構(gòu)圖</span> <img class="card-img" src="@/assets/imgs/find/article1.png" alt /> </div> </swiper-slide> <swiper-slide class="swiper-slide"> <div class="card"> <span class="card-tit">你離英劇里的下午茶,還差了這些</span> <span class="card-desc">對(duì)稱 | 色彩 | 構(gòu)圖</span> <img class="card-img" src="@/assets/imgs/find/article2.png" alt /> </div> </swiper-slide> <swiper-slide class="swiper-slide"> <div class="card"> <span class="card-tit">一起來(lái)觀看 Wes Anderson的色彩回旋舞</span> <span class="card-desc">對(duì)稱 | 色彩 | 構(gòu)圖</span> <img class="card-img" src="@/assets/imgs/find/article1.png" alt /> </div> </swiper-slide> </swiper> </div> </div> </template> <script> export default { name: 'FindArticle', data() { return { swiperOption: { // swiper配置 direction: 'vertical', // 滑動(dòng)方向改為垂直 height: 650,//你的slide高度 強(qiáng)制性 垂直方向生效 loop: true, //是否循環(huán) effect: 'coverflow', //進(jìn)出動(dòng)畫 grabCursor: true, centeredSlides: true, slidesPerView: 'auto', //longSwipesRatio: 0.2, //滑動(dòng)多少就可以滑動(dòng) coverflowEffect: { slideShadows: true, // 頁(yè)面陰影效果 rotate: 0,// 旋轉(zhuǎn)的角度 stretch: 500,// 拉伸 圖片間左右的間距和密集度 depth: 100,// 深度 切換圖片間上下的間距和密集度 modifier: .8,// 修正值 該值越大前面的效果越明顯 } } } } } </script> <style lang="scss" scoped> .article-main { width: 100%; height: 100%; overflow: hidden; .article-content { height: 100%; height: 1000px; // ???????????????? width: 100%; .swiper { height: 100%; padding: 0 15px; box-sizing: border-box; overflow-y: hidden; .swiper-slide { height: 470px; .card { display: flex; flex-direction: column; align-items: center; width: 100%; height: 470px; background-color: #f5f5f5; .card-tit { margin-top: 30px; width: 220px; font-size: 18px; color: #010e0d; font-weight: 600; } .card-desc { margin: 5px 0 15px; font-size: 12px; color: #999999; } .card-img { height: 358px; width: 265px; } } } } } } </style>
更多關(guān)于輪播圖效果的專題,請(qǐng)點(diǎn)擊下方鏈接查看學(xué)習(xí)
javascript圖片輪播效果匯總
jquery圖片輪播效果匯總
Bootstrap輪播特效匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。