Maison >interface Web >tutoriel HTML >Utilisation de base du swiper (6)
Cette section présente principalement l'attribut de centrage dans swiper.
Ce centrage fait référence au centrage de la page actuelle que nous parcourons. L'effet est plus évident lorsque nous utilisons l'affichage de groupe.
Tout d'abord, vous devez remplir une page swiper de base en fonction du contenu de la première section. 18bb7614196f7baab91b92810cbd2724
<div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide">第二页</div> <div class="swiper-slide">第三页</div> <div class="swiper-slide">第四页</div> <div class="swiper-slide">第五页</div> <div class="swiper-slide">第六页</div> <div class="swiper-slide">第七页</div> <div class="swiper-slide">第八页</div> <div class="swiper-slide">第九页</div> <div class="swiper-slide">第十页</div> <div class="swiper-slide">第十一页</div> <div class="swiper-slide">第十二页</div> <div class="swiper-slide">第十三页</div> </div> </div>
Ensuite, initialisez la page afin de rendre l'effet plus évident, nous ajoutons un affichage de groupe et un espace de page à la page. le test Au cours du processus, nous pouvons également supprimer ou annoter l'affichage groupé pour voir l'effet de page.
<script> var swipre = new Swiper('.swiper-container',{ slidesPerView:4, //分组显示 spaceBetween:30 //页面间隙 centeredSlides:true //页面居中 }); </script>
De cette façon, l'attribut de centrage de page est ajouté à notre projet
Ce qui précède est l'utilisation de base de swiper (6). Pour plus de contenu connexe, veuillez). faites attention au site Web PHP chinois (www.php.cn) !