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

23
2018/11

如何循環(huán)特殊樣式的swiper

發(fā)布時間:2018-11-23 16:42:59
發(fā)布者:jintianlong
瀏覽量:
0

在前端設(shè)計中,經(jīng)常會有不少的小伙伴們遇到輪播問題,這里小編推薦使用swiper,swiper中有許多的特殊樣式,但是有時會碰到別人寫的頁面自己搭后臺的,他們可能不會按照swiper原有的樣式來做,這樣做程序有時就會很頭痛,今天文匯軟件小編就來和大家分享一下這方面的問題。

我們首先來看下以下這個案例,像是圖中這樣的輪播,我們就完全可以套用swiper。

image.png

這個表面上看上去很簡單,但是當我們看到它的結(jié)構(gòu)時。。。

image.png

我們按照正常邏輯應(yīng)該是循環(huán)其中的圖片的但是如果我們循環(huán)圖片的話就會出現(xiàn)雖然一眼看上去沒問題還是兩組四排,但是里面只能調(diào)用四個的情況。

image.png

image.png

image.png

針對這種情況就需要我們再寫一個判斷。當他不等于0,且正好可以被2整除時,給他閉合標簽讓他重新開啟新的一組,否則就讓他按照正常的來循環(huán)。

image.png

這樣我們的輪播就可以按照后臺的循環(huán)來正常播放了,如下圖:(PS:這里只放了五個不是bug!!!)

image.png

image.png

想要了解更多前端知識,請關(guān)注文匯軟件。

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