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实现的listview效果
Apr 28 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Prototype String对象 学习
Jul 19 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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中的加密功能
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php创建图像具体步骤
2017/03/13 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
解析js如何获取css样式
2016/12/11 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js笔试题-接收get请求参数
2019/06/15 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
python中四舍五入的正确打开方式
2021/01/18 Python
应用服务器有那些
2012/01/19 面试题
新教师培训心得体会
2014/09/02 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
小学英语教学反思范文
2016/02/15 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python