How to implement left and right sliding navigation bar in html

Background:

Recently when writing a public account project, I encountered the need to dynamically generate a menu that can be slid. In the previous android development, it was implemented through the v7 package. The component is complete. So, how to implement this function in the development of web pages?

(Recommended tutorial: html tutorial)

Sliding menu can be implemented through swiper.js.

The following needs to introduce swiper.css and swiper.js.

html part:

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

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

Done!

The above is the detailed content of How to implement left and right sliding navigation bar in html. For more information, please follow other related articles on the PHP Chinese website!