swiper-添加控制按钮（可以控制翻页上一页和下一页）

川长思鸟来 2022-09-23 04:00 1162阅读 0赞

本次内容我们介绍在swiper页面当中添加控制按钮（可以控制翻页上一页和下一页）。  
   
首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div（.swiper-button-next/prev）加到外部容器(.swiper-container)当中.

<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

然后到js部分初始化函数并且绑定翻页按钮的类。

var swiper = new Swiper('.swiper-container',{
                    pagination:'.swiper-pagination',
                    paginationClickable:true,
                    spaceBetween:30,
                    nextButton:'.swiper-button-next',//绑定下一页的控制按钮
                    prevButton:'.swiper-button-prev'//绑定上一页的控制按钮
                });

我们可以通过类名来改变控制按钮的颜色。并且控制按钮会随着我们的属性改变而改变为对应的样式或添加功能

发表评论取消回复

表情：

评论列表（有 0 条评论，1162人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-ui Pagination分页只保留上一页下一页

有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。具体做法来看一下吧 <pagination

傷城~/ 2023年10月04日 19:41/ 0 赞/ 18 阅读

相关 PHP实现分页功能（一）上一页/下一页（含有分类功能的分页）

以下方法是基于THINKPHP5框架开发，实现上一页/下一页按钮式的分页功能，如下图 ![在这里插入图片描述][20200917151500115.png_pic_cent

我会带着你远行/ 2022年12月08日 04:18/ 0 赞/ 367 阅读

相关 tp5 实现文章上一篇和下一篇翻页

文章翻页功能，为了避免id加一和减一不存在的情况，通过tp5 where条件查询实现同时查出所有id的集合存放在数组，当id为第一个的时候，最后一篇即上一篇，当id为最后一

太过爱你忘了你带给我的痛/ 2022年11月27日 01:55/ 0 赞/ 136 阅读

相关 php上下页翻页,php实现网页上一页下一页翻页过程详解

前言这几天做项目因为数据太多，需要对信息进行上下翻页展示，就自己写了翻页的代码大致功能就是页面只显示几条信息，按上一页、下一页切换内容，当显示第一页时上一页和首页选项不

╰+攻爆jí腚メ/ 2022年11月19日 04:05/ 0 赞/ 281 阅读

相关 Android viewpage 设定上一页下一页按钮

目录 Android viewpage 设定上一页下一页按钮接口回调回去当前viewpage 页码 -------------------- Andro

太过爱你忘了你带给我的痛/ 2022年10月16日 07:37/ 0 赞/ 203 阅读

相关 Swiper-页面当中添加键盘控制翻页的功能

这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 <div class="swiper-container">

ゝ一纸荒年。/ 2022年09月23日 04:00/ 0 赞/ 257 阅读

相关 swiper-添加控制按钮（可以控制翻页上一页和下一页）

本次内容我们介绍在swiper页面当中添加控制按钮（可以控制翻页上一页和下一页）。首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div（.swipe

川长思鸟来/ 2022年09月23日 04:00/ 0 赞/ 1163 阅读

相关 Swiper-添加了翻页导航功能组件

上一节我们实现了一个基本的滑动页面，除了滑动什么功能都没有，那么这节课我们就要在页面当中添加其他的功能属性了。首先按照上节课的内容，将一个基本的swiper页面实

逃离我推掉我的手/ 2022年09月23日 03:59/ 0 赞/ 504 阅读

相关 js获取上一页下一页地址,当前页地址前进和后退

`history.back(-1)` `//直接返回当前页的上一页，数据全部消息，是个新页面` `history.go(-1)` `//也是返回当前页的上一页，不过表单里的数

拼搏现实的明天。/ 2022年06月03日 07:30/ 0 赞/ 219 阅读

相关 JSP连接数据库分页（首页，上一页，下一页，尾页）

![1274498-20180305102321258-2092234864.png][] ![1274498-20180305102548874-1379

深藏阁楼爱情的钟/ 2021年09月29日 11:22/ 0 赞/ 809 阅读