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>
版权声明:本文为weixin_45799605原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45799605/article/details/103048222

智能推荐

java反编译

jvm 把Boolean类型的值flag当做int类型处理。​​​ Foo.java: 由 class 文件生成 jasm 文件:java -jar asmtools.jar jdis Foo.class > Foo.jasm  修改jasm文件: 执行反编译: java -jar jd-gui-1.6.6.jar File 打开Foo.class文件:b修改为2 重新执行java...

【学习笔记】03-v-html的学习和示例

v-html的认识和使用 示例: 显示结果: 注意:v-html是有复制的...

Java实现在线考试系统(系统介绍)

1.和现在有的考试系统有以下几种优势: a.和现在有的系统比较起来,本系统有科目、章节、老师、学生、班级等信息的管理,还有批阅试卷查看已批阅试卷等。传统的考试系统划分并不细,业务功能简单。 b.和学校的考试系统还有外面的考试系统比较起来,本系统是B/S结构,学校的考试系统一般为C/S结构,性能方面不如B/S结构,并且C/S接口需要安装客户端,客户端压力很大,我的系统只需要电脑具有浏览器,在同一局域...

计算机视觉--多视几何初步尝试

基础矩阵的原理 K和K’分别是两个相机的参数矩阵。p和p’是X在平面π的坐标表示。所以可以得出 具体计算过程 代码: #!/usr/bin/env python coding: utf-8 from PIL import Image from numpy import * from pylab import * import numpy as np from imp ...

java初学者怎么学习才可以快速入门

java初学者怎么学习才可以快速入门 一、了解JAVA 我们要知道:Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言。 Java之父:詹姆斯·高斯林 1.1 java的三个体系 Java SE(Java Platform Standard Edition)。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境...

猜你喜欢

字段属性之主键&增删改查&自增长&唯一键约束

字段属性之主键&自增长&唯一键约束 主键 主键:primary key 主要的键 一张表中只有一个字段可以使用对应的键,用来唯一的约束该字段里面的数据,不能重复,这种称之为主键 一张表只能最多一个主键 增加主键 SQL操作中有多种方式增加主键大体分为三种 1.在创建表的时候直接在字段之后跟primary key关键字(主键本身不允许为空) 优点:非常直接:缺点:只能使用一个字段作为...

linux下 基于libmad的socket多用户mp3音频在线播放服务器

在众多大神的帮助下,这个在线播放流媒体服务器终于完成啦。。。。 这个mp3流媒体服务器设计的思路是,服务器程序server用多线程实现和多个客户端的通信(这是必然的),然后发送给客户端当前的音频列表公客户端选择,之后根据k客户端的选择给多个客户端传输相应mp3文件的数据,同时,客户端进行实时地音频解码并播放。 关于libmad开源mp3音频解码库的使用,见上一篇博客吧。。。。 在服务器程序这一端,...

Nginx

Nginx Nginx简介: Nginx是一个高性能的http和反向代理服务器,特点是有内存少,并发能力强,事实上Nginx的并发能力确实在同类型网页服务器中表现较好, Nginx用作web服务器:Nginx可以作为静态页面的web服务器,同时还支持CGI语言,但不支持java,java程序只能通过Tomcat配合完成。Nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受...

SpringCloud Alibaba - Sentinel入门案例(二)(流控规则 | 直接 / 关联 / 链路 / 快速失败 / Warm Up / 排队等待)

SpringCloud Alibaba - Sentinel入门案例(二)(流控规则 | 直接 / 关联 / 链路 / 快速失败 / Warm Up / 排队等待) 回溯 Sentinel 基本概念 正文 环境准备 流控规则介绍 简单介绍 对 阈值类型 / 单机阈值做 测试 流控模式 直接流控模式 关联流控模式 链路流控模式 资源名称的修改 链路模式正文 坑来了,怎么解决? 禁止收敛URL的入口 ...

SQL Server 无法创建索引 因为对象名称和索引名称重复

需求分析:如下图所示,给T_DD_OP1200_Final表的Id字段添加主键,保存时弹出 “T_DD_OP1200_Final”表 - 无法创建索引“PK_T_DD_OP1200_Final”。 因为发现对象名称 ‘dbo.T_DD_OP1200_Final’ 和索引名称 ‘PK_T_DD_OP1200_Fina...