Maison >interface Web >tutoriel HTML >Utilisation de base du swiper (3)
Tout d'abord, implémentez une page swiper de base en fonction du contenu de la première leçon.
Ajoutez ensuite des attributs au code js initialisé.
Bien sûr, n’oubliez pas de citer au préalable le fichier framework téléchargé.
Nous ajoutons d’abord le composant fonctionnel de navigation qui tourne les pages. Il nous convient de confirmer le défilement vertical de la page et le style de navigation sous défilement vertical.
Ajouter la navigation par page au conteneur externe.
<div class="swiper-container"> <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> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true, //设定可以点击翻页导航进行翻页 direction:'vertical' //设定页面垂直翻页 }); </script>
Cela permettra à la page de défiler verticalement.
Ce qui précède est l'utilisation de base de swiper (3). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !