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

swiper的基础使用(七)

时间:2016-06-23 11:11:08      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:html5 swiper

本文为H5EDU机构官方的HTML5培训教程 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 class="swiper-pagination"></div>
        </div>


 
之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果)

body{
                margin:0;
                padding:0;
                background:#F2F2F2;
            }
            .swiper-container{
                width:100%;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                width:60%;
                font-size:18px;
                text-align:center;
                justify-content:center;
                align-items:center;
                display:flex;
                background:#fff;
            }
            .swiper-slide:nth-child(2n){   //设定页面不同的宽度
                width:40%;
            }
            .swiper-slide:nth-child(3n){
                width:20%;
            }

之后再去js代码当中进行初始化并且添加属性

<script>
            var swiper = new Swiper(‘.swiper-container‘,{
                pagination:‘.swiper-pagination‘,
                paginationClickable:true,
                slidesPerView:‘auto‘,
                spaceBetween:30,
                centeredSlides:true
            });
        </script>

通过js当中添加的属性我们可以发现,只是将分组属性的值变为了‘auto’,然后开启slide页面居中的属性就可以了,怎么样,是不是非常简单呢?

点击进入swiper强化教程

本文出自 “11721999” 博客,请务必保留此出处http://11731999.blog.51cto.com/11721999/1792027

swiper的基础使用(七)

标签:html5 swiper

原文地址:http://11731999.blog.51cto.com/11721999/1792027

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