vue使用swiper.js重疊輪播組建樣式
更新時間:2019年11月14日 14:26:26 作者:一條傻狗耶
這篇文章主要為大家詳細介紹了vue使用swiper.js重疊輪播組建樣式,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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">一起來觀看 Wes Anderson的色彩回旋舞</span> <span class="card-desc">對稱 | 色彩 | 構(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">對稱 | 色彩 | 構(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">一起來觀看 Wes Anderson的色彩回旋舞</span> <span class="card-desc">對稱 | 色彩 | 構(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', // 滑動方向改為垂直 height: 650,//你的slide高度 強制性 垂直方向生效 loop: true, //是否循環(huán) effect: 'coverflow', //進出動畫 grabCursor: true, centeredSlides: true, slidesPerView: 'auto', //longSwipesRatio: 0.2, //滑動多少就可以滑動 coverflowEffect: { slideShadows: true, // 頁面陰影效果 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)于輪播圖效果的專題,請點擊下方鏈接查看學習
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue打印插件vue-print-nb的實現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實現(xiàn),需要引入插件npm install vue-print-nb --save,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05uniapp開發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS應(yīng)用,需要的朋友可以參考下2022-12-12vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10