咨询电话:
15628812133
27
2023/10

Swiper左右切换箭头如何于外部显示

发布时间:2023-10-27 17:57:03
发布者:·
浏览量:
0

    Swiper左右切换箭头如何于外部显示

    大家看如上图片是设计稿的需求,乍一看是没毛病的,但是,你仔细看

 Swiper左右切换箭头如何于外部显示

    是的,切换按钮是游离在整体宽度之外的,由于我懒,所以这里使用了一个layBody来框柱内容的宽度,然后大家看一下swiper的切换。

     Swiper左右切换箭头如何于外部显示

    是的,swiper的切换按钮是在swiper内部的,这里swiper使用了绝对定位来使切换按钮位于两侧,于是我们可以修改一下left和right。

     Swiper左右切换箭头如何于外部显示

    结果发生了这样的事,因为两侧的切换是与整个swiper定位的,swiper设置了超出隐藏,所以超出的部分是看不见的,那么就不能用定位了吗。其实不然,我陷入了一个误区,导致我认为只有js绑定的class类内部才能正常执行切换。我们完全可以把切换按钮放在所绑定的区域外,然后与绑定的class类同级,再在外边加一个相对定位就可以了。

     Swiper左右切换箭头如何于外部显示

Swiper左右切换箭头如何于外部显示

Swiper左右切换箭头如何于外部显示

 

 

    在body中我们使用定位就不会被隐藏了,这样我们就实现了在限制宽度的条件下使用定位来设置swiper切换按钮。


关键词:
返回列表