swiper-页面的多行显示

冷不防 2022-09-23 04:00 554阅读 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 条评论，554人围观）

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

相关阅读

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

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

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

相关 Idea标签多行显示

目录摘要解决方法 -------------------- 摘要是否遇到标签太多，一行显示不全？下面就给你说怎么多行显示解决方法打开

阳光穿透心脏的1/2处/ 2023年10月07日 20:56/ 0 赞/ 106 阅读

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

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

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

相关 swiper-页面的free模式。

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

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

相关 swiper-页面的多行显示

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

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

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

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

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

相关 Swiper-页面布置

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

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

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

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

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

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

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

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

相关 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 赞/ 574 阅读