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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
浅探express路由和中间件的实现
Sep 30 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基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
js简单时间比较的方法
2016/08/02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python中下划线的使用方法
2015/03/27 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python递归法解决棋盘分割问题
2019/07/17 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python名片管理系统开发
2020/06/18 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
英文留学推荐信范文
2014/01/25 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
群教个人对照检查材料
2014/08/20 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年小学开学寄语
2015/02/27 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python