html實現左右滑動選單
阿新 • • 發佈:2019-01-09
ps:最近在寫一個公眾號專案時遇到需要動態生成選單可滑動,在之前的android開發中實現通過v7包中提供的元件即可完成。那麼,在網頁的開發中需要如何實現這個功能呢?!,這裡通過swiper.js來實現可滑動選單。
http://www.swiper.com.cn/api/start/new.html
以下需引入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('.swiper-container', {
autoplay: true,//可選選項,自動滑動
freeMode:true,//滑動不夠一格,不會自動貼合
slidesPerView:4,//設定slider容器能夠同時顯示的slides數量
})
</script>
這樣就已經實現可左右滑動的導航欄了。