Maison > interface Web > tutoriel HTML > Utilisation de base du swiper (3)

Utilisation de base du swiper (3)

黄舟
Libérer: 2017-01-20 15:11:32
original
1316 Les gens l'ont consulté

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(&#39;.swiper-container&#39;,{
pagination:&#39;.swiper-pagination&#39;,   //绑定翻页导航
paginationClickable:true,        //设定可以点击翻页导航进行翻页
direction:&#39;vertical&#39;                //设定页面垂直翻页
});
</script>
Copier après la connexion

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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal