网站前端制作之swiper拖拽左右滑动按钮

2023-02-07 分类：网站建设

在一些前端项目中需要做滑动按钮，比如滑动切换模式之类的，如图：

前端制作1

在PC端上，鼠标拖动滑块一次切换不同的模式，用js自己写比较麻烦，我想到了一个简单有效的办法，用swiper轮播插件来写简单快速。Swiper轮播插件是非常强大的，前端工作人员一定不陌生，如果你不了解可以去官网看看API，你会发现它不仅仅只局限于表面的轮播功能。
首先在页面引入jquery和swiper插件，然后是编写html代码如图：

前端代码2

在这里有3种不同的模式要切换，就要用到5个swiper-slide，如图所示在第1个swiper-lisde中设置标签属性data-index="2"，第2个swiper-lisde中设置标签属性data-index="1"，第3个swiper-lisde中设置标签属性data-index="0"，同时第三个swiper-slide设置滑块背景图片，其余的空白。Css在这里就不多说了。
Siwpe轮播插件有自带的API，如图：

前端代码3

如图所示，“slidesPerView: 3,”:设置slider容器能够同时显示的slides数量，在这里设置为3，”initialSlide: 2,”:设置为2后，Swiper初始化时activeSlide成了第三个。因为要滑动后对应上的不同模式，就需要用到swiper的回调函数”onSlideChangeEnd”,这时就要用到标签属性值了（data-index），滑块成功滑动一次”swiper-slide-active”的位置会发生改变，获取的标签属性值也会不同。根据获取的值的不同分别添加和删除选中状态的类名（“on”）,这样一个滑动按钮初步就成了。但在实际测试过程中，会出现回调函数不成功的情况，经过多次测试和研究需要用到” crossFade: true（过度效果结束触发）”,这样滑动按钮就完成了。

当前标题：网站前端制作之swiper拖拽左右滑动按钮
链接URL：https://www.cdcxhl.com/news25/235725.html

成都网站建设公司_创新互联，为您提供电子商务、网站设计、静态网站、商城网站、虚拟主机、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容