swipe的基础使用（二十六）

最新推荐文章于 2024-06-19 15:26:09 发布
最新推荐文章于 2024-06-19 15:26:09 发布
阅读量1.2k 收藏
点赞数
分类专栏： swiper介绍 文章标签： html5 web前端 框架 移动 swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/never__ends/article/details/52035897
版权
这篇博客探讨了如何在Swiper框架中创建视差效果。通过设置背景图片层，调整滑动距离和方向，以及配置页面内容的移动距离，结合JavaScript初始化页面，可以实现炫酷的视差滚动体验。
摘要由CSDN通过智能技术生成

本次内容我们介绍swiper当中的视差效果。首先我们按照流程先要创建好swiper的基础页面构成。

<div class="swiper-container">
            <div class="parallax-bg" style="background-image:url(4.jpg)"
            data-swiper-parallax="-23%"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="title" data-swiper-parallax="-100">H5EDU 1</div>
                    <div data-swiper-parallax="-300"><img src="logo.png"></div>
                </div>
                <div class="swiper-slide">
                    <div class="title" data-swiper-parallax="-100">H5EDU 2</div>
                    <div data-swiper-parallax="-300"><img src="logo.png"></div>
最低0.47元/天 解锁文章
花开艳丽终消散
关注
专栏目录
uni-app小程序基础知识速览（上）
可可的博客
10-23 519
微信小程序开发文档相当于div image button input v-if-else dom元素不显示的显示与隐藏 swiper 文本长按 富文本 for循环 总结 底部导航配置 ui练习 发起get请求 二、路由跳转 1.声明式导航 后退 2.编程式导航 获取路由传递数据 三、下拉刷新 配置 四、上拉分页处理 配置文件 ts文件 获取颜色 ui页面 外部使用wxs方式 ui引入并且重新命名 七、上传图片、预览图片 ui 条件注释实现跨段兼容创建模板控制样式是否可以被外部使用以及使
openlayers示例教程284+【目录】
大剑师兰特的GIS世界
09-05 1万+
vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中，解释相应的API知识点。
关于iOS Swipe手势的一点总结
AchildFromBUAA的博客
08-11 1268
第一篇CSDN的博客，正好在学习iOS开发，就写一下对swipe手势的一点总结和注意点吧。
Swiper教程 —— 使用方法
bright_mmmmmmmmmmmm的专栏
08-19 193
本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：Swiper教程 —— 使用方法 Swiper使用方法 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。 ... ... 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻...
swipe 滑动操作
一个老宅男
12-12 933
1.swipe（） 滑动用法 swipe(self, start_x, start_y, end_x, end_y, duration=None) :Args: - start_x - 开始滑动的x坐标 - start_y - 开始滑动的y坐标 - end_x - 结束点x坐标 - end_y - 结束点y坐标 - duration -...
Swiper你必须知道的参数配制-解析
橙-极纪元-cplvfx-JJY.Cheng
08-09 2506
第一步 上代码 JS var swiper = new Swiper(".news",{ pagination: ".news_lis", paginationClickable: true, slidesPerView: 4, spaceBetween: 20, nextButton: ".news-nex
Swiper 参数说明
热门推荐
xiaoshu611的博客
01-11 2万+
Swiper 初始化 支持下列中的参数 Parameter（参数） Type(类型) Default Value（默认值 Example（例子） Description（说明） speed number 300 600 slides滑块动画之间的持续时间（单位ms） eventTarget stri
《第一行代码Android》学习总结第十二章 Material Design
LBW9368的博客
12-13 506
        它是由谷歌设计师基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包括了视觉、运动、互动效果等特性。 一、Toolbar （一）创建Toolbar          Material控件中的一个控件，类似于ActionBar。 1、将res/values/styles.xml文件中的parent属性改为Theme.AppCompat.Light...
python客户端自动化测试滚轮移到最上面_Appium python自动化测试系列之页面滑动原理讲解（十）...
weixin_36213081的博客
01-29 515
10.1.1 页面滑动原理分析在页面滑动查找章节我们就讲了滑动的知识点，只是不知道大家是否有认真练习以及去理解，如果你认真练习、理解了那么我相信这一章节的东西不用看也能够完成，下面我们还是简单分析一下。所谓的页面滑动在我们实际操作手机的过程中就是不断的从屏幕的下面滑到上面，或者右边滑到左边，反之亦然。其实在做自动化滑动的时候我们遵循的也是这个道理，我们只需要按着一个点然后在屏幕上拖动到另外一个点就...
parallax-bg.el:视差背景
07-23
视差背景 非常梦幻般的视差背景 特征 快速地！ 简单的声明式 API 适用于动态添加的元素 将背景容器减少到可到达的区域！ css 仅后备 轻的 演示 用法 创建一个元素“u1-parallax-bg”。 它将是具有类u1-parallax-bg-stage的最近元素或最近定位元素 (offsetParent) 的视差背景。 import 'https://cdn.jsdelivr.net/gh/u1ui/parallax-bg.el@3.3.3/parallax-bg.min.js' ; < link rel = stylesheet href =" https://cdn.jsdelivr.net/gh/u1ui/parallax-bg.el@3.3.3/parallax-bg.min.css " > < div class = u1-parallax-bg-sta
swipe多种手机触屏滑动效果
09-15
swipe多种手机触屏滑动效果
swipe的demo
02-27
swipe实现轮播图的运用swipe是一个轻量级的移动滑动组件，它可以支持精确的触滑移动操作，能解决移动端对滑动的需求。
Swiper使用配置（一）
qq_48445738的博客
11-07 3322
html 结构可以参考 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-s
html swiper高度为零,Swiper参数说明（swiper参数配置）
weixin_33278498的博客
06-30 977
Swiper参数说明(swiper参数配置)1.自由模式与滑块容器(Free Mode and Scroll Container)Parameter(参数)Type(类型)DefaultValue(默认值Example(例子)Description(说明)speednumber300600slides滑块动画之间的持续时间(单位ms)eventTargetstring‘wrapper’‘cont...
Swiper插件常用属性记录
偏执
08-04 659
【代码】Swiper插件常用属性记录。
关于swiper的一些常用属性及示例
debugtoday的博客
03-03 5993
关于swiper的一些常用属性及示例
HarmonyOS应用开发：Swiper（容器组件）
最新发布
situnanQAQ的博客
06-19 2504
滑块视图容器，提供子组件滑动轮播显示的能力。
swiper的理解
qq_45829293的博客
09-10 2173
目录一、swiper是什么？1.swiper的含义二、使用步骤1.引入库2.读入数据 一、swiper是什么？ 1.swiper的含义 滑块视图容器，一般用于左右滑动与上下滑动。用处最多：轮播图 滑动与滚动的区别：滑动是屏幕之间的切换、滚动 二、使用步骤 1.引入库 2.读入数据 ...
vue3使用swipe轮播
04-19
Vue 3是一种流行的JavaScript框架，用于构建用户界面。在Vue 3中，可以使用第三方库或自定义组件来实现轮播功能。下面是一种使用Swipe库实现轮播的方法： 1. 首先，你需要安装Swipe库。可以通过npm或yarn来安装： ``` npm install swipejs ``` 或 ``` yarn add swipejs ``` 2. 在Vue组件中引入Swipe库： ```javascript import Swipe from 'swipejs' ``` 3. 在Vue组件的`mounted`生命周期钩子中初始化Swipe轮播： ```javascript mounted() { const swipe = new Swipe(this.$refs.swipeContainer, { // 配置项 }) } ``` 这里的`this.$refs.swipeContainer`是一个DOM元素的引用，它将作为轮播容器。 4. 在HTML模板中添加轮播容器和轮播项： ```html <div ref="swipeContainer" class="swipe"> <div class="swipe-wrap"> <div>轮播项1</div> <div>轮播项2</div> <div>轮播项3</div> </div> </div> ``` 这里的`.swipe`和`.swipe-wrap`是自定义的CSS类，你可以根据需要进行修改。 5. 最后，你可以根据需要配置Swipe的选项，例如自动播放、循环等。具体的配置选项可以参考Swipe库的文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值