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

2024-01-08 分类：网站建设

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

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

在这里有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，如图：

如图所示，“slidesPerView: 3,”:设置slider容器能够同时显示的slides数量，在这里设置为3，”initialSlide: 2,”:设置为2后，Swiper初始化时activeSlide成了第三个。因为要滑动后对应上的不同模式，就需要用到swiper的回调函数”onSlideChangeEnd”,这时就要用到标签属性值了（data-index），滑块成功滑动一次”swiper-slide-active”的位置会发生改变，获取的标签属性值也会不同。根据获取的值的不同分别添加和删除选中状态的类名（“on”）,这样一个滑动按钮初步就成了。但在实际测试过程中，会出现回调函数不成功的情况，经过多次测试和研究需要用到” crossFade: true（过度效果结束触发）”,这样滑动按钮就完成了。
创新互联专注于高端网站建设，为上市公司、中大型企业集团提供网站定制、小程序定制服务，欢迎客户咨询我们的建站热线400-800-9385

以上就是关于网站前端制作之swiper拖拽左右滑动按钮(前端制作个人网站)，希望对你有帮助，更多内容关注创新互联。

网站标题：网站前端制作之swiper拖拽左右滑动按钮(前端制作个人网站)
当前网址：https://www.cdcxhl.com/news3/312553.html

成都网站建设公司_创新互联，为您提供网站维护、外贸建站、品牌网站建设、做网站、静态网站、手机网站建设

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

猜你还喜欢下面的内容