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 相关文章推荐
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 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上传文件的增强函数
2010/07/21 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
浅析vue-router原理
2018/10/19 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Django model select的多种用法详解
2019/07/16 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
造型师求职自荐信
2013/09/27 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
党员培训思想汇报
2014/01/07 职场文书
施工安全汇报材料
2014/08/17 职场文书
甲午风云观后感
2015/06/02 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Python闭包的定义和使用方法
2022/04/11 Python