HTML結構app
<div className="swiper-container main_meeting"> <div className="swiper-wrapper"> <div className="swiper-slide">Slide 1</div> <div className="swiper-slide">Slide 2</div> <div className="swiper-slide">Slide 3</div> <div className="swiper-slide">Slide 4</div> </div>
<div class="swiper-pagination swiper-pagination-banner"></div> </div>
Swiper.js設置ide
1 var banner = new Swiper('.swiper-banner', { 2 //分頁,多個分頁能夠使用不一樣的class名 3 pagination: '.swiper-pagination-banner', 4 //點擊切換 5 paginationClickable: true, 6 //自動播放時間 7 autoplay:5000, 8 //切換速度,即slider自動滑動開始到結束的時間(單位ms),也是觸摸滑動時釋放至貼合的時間。 9 speed:2000, 10 //複製slide,看起來是循環的 11 loop:true, 12 //用戶操做swiper以後,是否禁止autoplay.默認爲true:中止。 13 autoplayDisableOnInteraction:false, 14 //拖動釋放時不會輸出信息,阻止click冒泡。拖動Swiper時阻止click事件。 15 preventLinksPropagation:true 16 });