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

Utilisation de base du swiper (2)

黄舟
Libérer: 2017-01-20 15:10:39
original
1202 Les gens l'ont consulté

Dans la section précédente, nous avons implémenté une page coulissante de base qui n'avait aucune fonction sauf le glissement. Donc dans cette section, nous ajouterons d'autres attributs fonctionnels à la page.

Tout d'abord, implémentez une page swiper de base en fonction du contenu de la leçon précédente.
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.


Ajouter une navigation de 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        //设定可以点击翻页导航进行翻页
});
</script>
Copier après la connexion


Cela ajoute une navigation de page à la page.

Ce qui précède est l'utilisation de base de swiper (2). 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