swiper的基础使用(五)
swiper的基础使用(五)
zhanyingwang 发表于2年前
swiper的基础使用(五)
  • 发表于 2年前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

本文为H5EDU机构官方HTML5培训教程HTML5培训,swiper教程。本文主要介绍swiper框架的基本使用方法。

本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
 
第一步我们依然是编写一个基础的swiper页面。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第十页</div>
            </div>
        </div>

然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。

<script>
            var swiper = new Swiper('.swiper-container',{
                slidesPerView:3,   //页面分组显示,这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。

 

点击进入swiper教程:http://11731999.blog.51cto.com/11721999/1791249

 

共有 人打赏支持
粉丝 4
博文 66
码字总数 28707
×
zhanyingwang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: