东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
27
2023/10

Swiper左右切換箭頭如何于外部顯示

發(fā)布時(shí)間:2023-10-27 17:57:03
發(fā)布者:·
瀏覽量:
0

    Swiper左右切換箭頭如何于外部顯示

    大家看如上圖片是設(shè)計(jì)稿的需求,乍一看是沒(méi)毛病的,但是,你仔細(xì)看

 Swiper左右切換箭頭如何于外部顯示

    是的,切換按鈕是游離在整體寬度之外的,由于我懶,所以這里使用了一個(gè)layBody來(lái)框柱內(nèi)容的寬度,然后大家看一下swiper的切換。

     Swiper左右切換箭頭如何于外部顯示

    是的,swiper的切換按鈕是在swiper內(nèi)部的,這里swiper使用了絕對(duì)定位來(lái)使切換按鈕位于兩側(cè),于是我們可以修改一下left和right。

     Swiper左右切換箭頭如何于外部顯示

    結(jié)果發(fā)生了這樣的事,因?yàn)閮蓚?cè)的切換是與整個(gè)swiper定位的,swiper設(shè)置了超出隱藏,所以超出的部分是看不見的,那么就不能用定位了嗎。其實(shí)不然,我陷入了一個(gè)誤區(qū),導(dǎo)致我認(rèn)為只有js綁定的class類內(nèi)部才能正常執(zhí)行切換。我們完全可以把切換按鈕放在所綁定的區(qū)域外,然后與綁定的class類同級(jí),再在外邊加一個(gè)相對(duì)定位就可以了。

     Swiper左右切換箭頭如何于外部顯示

Swiper左右切換箭頭如何于外部顯示

Swiper左右切換箭頭如何于外部顯示

 

 

    在body中我們使用定位就不會(huì)被隱藏了,這樣我們就實(shí)現(xiàn)了在限制寬度的條件下使用定位來(lái)設(shè)置swiper切換按鈕。


關(guān)鍵詞:
返回列表