swiper-页面的自动分组+居中的内容。

一时失言乱红尘 2022-09-23 04:00 223阅读 0赞

这节课我们介绍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页面居中的属性就可以了，怎么样，是不是非常简单呢？

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 div中内容水平垂直居中的方法

实现将 div 元素中的内容水平垂直居中有多种方法。以下是常用的方法：使用 Flexbox 布局： <style> .container \{ display: fl

谁借莪１个温暖的怀抱￠/ 2024年03月24日 19:46/ 0 赞/ 89 阅读

相关在swiper页面实现指定区域内容横向滚动的方案

最新更新时间：2020年05月27日16:31:43 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面部分内容横向滚动固

梦里梦外;/ 2023年02月13日 05:41/ 0 赞/ 21 阅读

相关如何让swiper里面的内容显示在swiper之外呢？

`.swiper-container`里面会有`overflow:hidden`的属性控制着内容的显示，那么我们可以通过`padding:10px 0 ;`来让内容撑开容器，同

小灰灰/ 2022年12月09日 11:56/ 0 赞/ 484 阅读

相关 swiper-页面的free模式。

这节课我们介绍swiper页面的free模式。第一步，我们还是要创建一个swiper的基础页面。 <div class="swiper-containe

女爷i/ 2022年09月23日 04:00/ 0 赞/ 256 阅读

相关 swiper-页面的多行显示

这节课我们介绍swiper页面的多行显示。第一步，我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。 <div class=

冷不防/ 2022年09月23日 04:00/ 0 赞/ 496 阅读

相关 swiper-页面的自动分组+居中的内容。

这节课我们介绍swiper页面的自动分组+居中的内容。第一步还是创建一个基础的swiper页面 <div class="swiper-container

一时失言乱红尘/ 2022年09月23日 04:00/ 0 赞/ 224 阅读

相关 Swiper-如何让swiper页面分组显示

本节讲解如何让swiper页面分组显示。有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求，在swiper当中就包装了一个屏幕显示一组页面的方法，只需要在swipe

落日映苍穹つ/ 2022年09月23日 04:00/ 0 赞/ 71 阅读

相关 Swiper-页面布置

首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 > > <!doctype html

ゞ浴缸里的玫瑰/ 2022年09月23日 03:59/ 0 赞/ 202 阅读

相关居中的方式

CSS垂直居中的11种实现方式 11种实现方式分别如下： 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码： <div id="box"

àì夳堔傛蜴生んèń/ 2021年12月23日 03:11/ 0 赞/ 231 阅读

相关 html中表格内容居右的写法

style='text-align:right' eg: <tr> <th style='text-align:right'>所属机关</th

￡神魔★判官ぃ/ 2021年09月27日 11:30/ 0 赞/ 902 阅读