swiper-页面的多行显示

冷不防 2022-09-23 04:00 435阅读 0赞

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

<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 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 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>

之后我们到js当中初始化我们的swiper

<script>
                var swiper = new Swiper('.swiper-container',{
                   pagination:'.swiper-pagination',
                   paginationClickable:true,
                   spaceBetween:10,
                   slidesPerView:3,
                   slidesPerColumn:3   //将swiper页面多行显示为：3行
                });
            </script>

那么可以看出我们这次没有太大的变化，实现样式依然是在初始化当中添加一条属性---------slidePerColumn  
一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙

发表评论取消回复

表情：

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

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

相关阅读

相关最多显示2行文字,多余的省略显示。

前端在 CSS 中最多显示 2 行文字，可以使用 `overflow: hidden` 和 `text-overflow: ellipsis` 属性，并设置一个高度限制。例

深碍√TFBOYSˉ_/ 2024年03月27日 16:51/ 0 赞/ 35 阅读

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

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

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

相关 swiper-页面的free模式。

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

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

相关 swiper-页面的多行显示

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

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

相关 Swiper-页面布置

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

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

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

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

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

相关多行超出部分显示省略号

var p = document.getElementsByTagName('p')[0].innerHTML; console.log(p);

你的名字/ 2022年09月16日 13:28/ 0 赞/ 230 阅读

相关 css 多行文本溢出显示省略号(…)，显示3行多出的显示省略号

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line

ゝ一纸荒年。/ 2022年03月22日 14:01/ 0 赞/ 406 阅读

相关 freetype多行显示,居中显示

转载自：[https://www.cnblogs.com/lifexy/p/8514154.html][https_www.cnblogs.com_lifexy_p_85141

Love The Way You Lie/ 2021年11月29日 23:02/ 0 赞/ 454 阅读

相关 linux grep 显示多行信息

标准unix/linux下的grep通过以下参数控制上下文显示file文件中匹配foo字串那行以及上下5行 grep -C 5 foo file

妖狐艹你老母/ 2021年08月31日 11:11/ 0 赞/ 428 阅读