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

咨詢電話:
15628812133
10
2023/11

Swiper圖的“左右護(hù)法”

發(fā)布時間:2023-11-10 20:18:22
發(fā)布者:·
瀏覽量:
0

Swiper圖的“左右護(hù)法”

  設(shè)計出了一個這樣的swiper,兩側(cè)的大小明顯小于中間的且只顯露了一半,這樣的樣式我們怎么做呢,眾所周知,swiper有一個異形的Slide,其實(shí)就是未選擇的swipertransform: scale()縮小,而選中的則變?yōu)檎#覀兛梢灾苯咏梃b過來。

Swiper圖的“左右護(hù)法”

  那么我們怎么規(guī)定顯示的的圖片呢?

Swiper圖的“左右護(hù)法”

Swiper中有兩個屬性,

  1.分別為centeredSlides使swiper選中的在中間顯示,

  2.slidesPerView顯示幾個,這個數(shù)據(jù)可以設(shè)定為小數(shù),如上意味著顯示1.25個。

  在開啟循環(huán)的同時,由于swiper顯示是在中間,那么左右兩邊的swiper會均分剩余的0.25,那么我們選中的swiper就會出現(xiàn)“左右護(hù)法”了。

以下就是實(shí)現(xiàn)的效果,大家不要忘了把左右兩邊間距調(diào)整為0,因?yàn)槲覀兊?/span>transform已經(jīng)把左右兩側(cè)的大小調(diào)整為原本的0.8倍了。

Swiper圖的“左右護(hù)法”


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