久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

27
2023/10

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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


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