So implementieren Sie eine nach links und rechts verschiebbare Navigationsleiste in HTML

Hintergrund:

Vor kurzem stieß ich beim Schreiben eines öffentlichen Kontoprojekts auf die Notwendigkeit, ein Menü dynamisch zu generieren, das in der vorherigen Android-Entwicklung über die im v7-Paket bereitgestellten Komponenten implementiert werden konnte. Wie kann diese Funktion bei der Entwicklung von Webseiten implementiert werden?

(Empfohlenes Tutorial: HTML-Tutorial)

Das Schiebemenü kann über swiper.js implementiert werden.

Swiper.css und swiper.js müssen unten vorgestellt werden.

HTML-Teil:

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

js-Teil:

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

Fertig!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine nach links und rechts verschiebbare Navigationsleiste in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!