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

落日映苍穹つ 2022-09-23 04:00 40阅读 0赞

**本节讲解如何让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>

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

发表评论取消回复

表情：

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

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

相关阅读

相关 swiper轮播图 swiper-pagination 小圆点不显示

<div class="swiper-pagination" slot="pagination"></div> //这个上面加一个 slot="paginat

小鱼儿/ 2023年05月31日 02:54/ 0 赞/ 3 阅读

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

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

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

相关 swiper

<template>  <!-- <div class="title">切换效果-effect</div> --

阳光穿透心脏的1/2处/ 2022年10月07日 11:49/ 0 赞/ 157 阅读

相关 swiper-页面的free模式。

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

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

相关 swiper-页面的多行显示

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

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

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

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

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

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

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

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

相关 Swiper-页面布置

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

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

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 408 阅读

相关 swiper

第一步安装 npm install swiper //这个是在别的情况下载的文件 npm install vue-awesome-swiper --sav

朴灿烈づ我的快乐病毒、/ 2022年01月23日 01:25/ 0 赞/ 238 阅读