swiper的基础使用(三)
程序员文章站
2022-05-16 10:38:56
...
首先按照第一节课的内容,将一个基本的swiper页面实现。
然后在初始化的js代码当中添加属性。
当然事先不要忘记引用下载好的框架文件。
我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。
在外部容器当中加入翻页导航。
然后在初始化的js代码当中添加属性。
当然事先不要忘记引用下载好的框架文件。
我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。
在外部容器当中加入翻页导航。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> </div> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true, //设定可以点击翻页导航进行翻页 direction:'vertical' //设定页面垂直翻页 }); </script>
这样就可以使页面进行垂直的滚动。
以上就是 swiper的基础使用(三)的内容,更多相关内容请关注PHP中文网(www.php.cn)!
推荐阅读
-
实战电商后端系统(三)—— 以vue-element-admin为基础的前端项目对接后端接口
-
Java使用三种方法实现高并发锁的示例代码
-
Knockout text绑定DOM的使用方法_基础知识
-
JS中Date日期函数中的参数使用介绍_基础知识
-
关于可运行代码无法正常执行的使用说明_基础知识
-
还在为小三角形切图?使用纯CSS写一个简单的三角形_html/css_WEB-ITnose
-
使用七牛的镜像存储作为discuz的第三方服务器解决方案这样好嘛?
-
前端新人学习笔记-------html/css/js基础知识点(三) - 不穿裤子的衣服
-
wicket基础应用(1)--使用wicket对表单中的数据进行验证
-
在Python的Flask中使用WTForms表单框架的基础教程