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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
javascript canvas实现雨滴效果
Jun 09 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php实现Session存储到Redis
2015/11/11 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python中input与raw_input 之间的比较
2017/08/20 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python输入错误后删除的方法
2019/10/12 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
JAVA软件工程师测试题
2014/07/25 面试题
毕业寄语大全
2014/04/09 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书