左右にスライドするナビゲーションバーをHTMLに実装する方法

背景:

最近、パブリック アカウント プロジェクトを作成しているときに、スライドできるメニューを動的に生成する必要性に遭遇しました。以前の Android 開発では、 v7 パッケージを通じて実装され、コンポーネントは完成しました。では、Web ページの開発にこの機能を実装するにはどうすればよいでしょうか?

(推奨チュートリアル: html チュートリアル)

スライディング メニューは swiper.js を通じて実装できます。

以下では、swiper.css と swiper.js を導入する必要があります。

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>

js 部分:

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

完了しました。

以上が左右にスライドするナビゲーションバーをHTMLに実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。