码迷,mamicode.com
首页 > 其他好文 > 详细

swiper的基础教程(十二)

时间:2016-06-30 12:41:32      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

本文为H5EDU机构官方的HTML5培训教程 swiper教程
 
本节内容介绍swiper当中如何将导航变为滚动条样式。
 
首先我们搭建一个swiper页面的基本布局。

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>

然后到JS部分添加初始化代码。

  var swiper = new Swiper(‘.swiper-container‘,{
                spaceBetween:30,
                grabCursor:true,
                slidesPerView:3,
                centeredSlides:true,
                scrollbar:‘.swiper-scrollbar‘, //绑定分页导航
                scrollbarHide:true  //开启导航在不活动时的隐藏
            });

可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar,然后在初始化当中绑定导航。就可以实现了。当然,可以关闭导航条的隐藏效果

 

点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html

swiper的基础教程(十二)

标签:

原文地址:http://www.cnblogs.com/zhanyingwang/p/5629523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!