vue使用swiper.js重叠轮播组建样式


Posted in Javascript onNovember 14, 2019

本文实例为大家分享了vue使用swiper.js重叠轮播组建样式,供大家参考,具体内容如下

vue使用swiper.js重叠轮播组建样式

<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">对称 | 色彩 | 构图</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">对称 | 色彩 | 构图</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">对称 | 色彩 | 构图</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, //是否循环
    effect: 'coverflow', //进出动画
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    //longSwipesRatio: 0.2, //滑动多少就可以滑动
    coverflowEffect: {
     slideShadows: true, // 页面阴影效果
     rotate: 0,// 旋转的角度
     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>

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 #Javascript
浅析Vue 防抖与节流的使用
Nov 14 #Javascript
微信小程序tabBar设置实例解析
Nov 14 #Javascript
layui清除radio的选中状态实例
Nov 14 #Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 #Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 #Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 #Javascript
You might like
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
javascript如何创建对象
2016/08/29 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
详解Python中的文本处理
2015/04/11 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
如何完美的建立一个python项目
2020/10/09 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
争论的故事教学反思
2014/02/06 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
宾馆客房管理制度
2015/08/06 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript