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

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

在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