Maison > interface Web > tutoriel HTML > le corps du texte

Comment implémenter la barre de navigation coulissante gauche et droite en HTML

王林
Libérer: 2020-08-25 16:51:06
avant
6480 Les gens l'ont consulté

Comment implémenter la barre de navigation coulissante gauche et droite en HTML

Contexte :

Récemment, lors de l'écriture d'un projet de compte public, j'ai rencontré le besoin de générer dynamiquement un menu coulissant. Dans le développement Android précédent, il a été implémenté via. le package v7. Le composant est complet. Alors, comment implémenter cette fonction dans le développement de pages web ?

(Tutoriel recommandé : tutoriel HTML)

Les menus coulissants peuvent être implémentés via swiper.js.

Ce qui suit doit présenter swiper.css et swiper.js.

partie html :

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
    <div class="swiper-slide">slider3</div>
    <div class="swiper-slide">slider3</div>
    <div class="swiper-slide">slider3</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
Copier après la connexion

partie js :

初始化
<script>
var mySwiper = new Swiper(&#39;.swiper-container&#39;, {
    autoplay: true,//可选选项,自动滑动
    freeMode:true,//滑动不够一格,不会自动贴合
    slidesPerView:4,//设置slider容器能够同时显示的slides数量
})
</script>
Copier après la connexion

Terminé !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
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