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

王林
リリース: 2020-08-25 16:51:06
転載
6489 人が閲覧しました

左右にスライドするナビゲーションバーを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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート