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>

partie js :

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

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!