一、html演示代码:

 <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>

二、2.1 假设设置每组显示的3个slide,则js配置如:

 var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
slidesPerView : 3, // 100%宽度情况下,显示3个slide,(原理就是设置每个slide的宽度为30%)
})

三、3.1 假如需要自定义每个slide的宽度(或者在最后一个slide添加其他操作),则js配置如:

 var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 'auto', // 开启自定义slide宽度,配合下面css样式设置即可
})

3.2、css配置:

    .swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide { // 默认设置slide宽度为屏幕的80%
text-align: center;
font-size: 18px;
background: #fff;
width: 80%;
}
.swiper-slide:nth-child(2n) { // 2n偶数行slide宽度为屏幕的60%
width: 60%;
}
.swiper-slide:nth-child(3n) { // 3n奇数行slide宽度为屏幕的40%
width: 40%;
}

3.3 最终效果如下:

四、打完收工。

swiper轮播图设置每组显示的个数及自定义slide宽度的更多相关文章

  1. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  2. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  3. vue2 使用 swiper 轮播图效果

    第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...

  4. swiper轮播图--兼容IE8

    //引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...

  5. 微信小程序之swiper轮播图中的图片自适应高度

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...

  6. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  7. swiper 轮播图,拖动之后继续轮播

    在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...

  8. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  9. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

随机推荐

  1. php连接access

    1.在控制面板中打开管理工具图标. 2.双击其中的数据源(ODBC)图标. 3.选择系统 DSN 选项卡. 4.点击系统 DSN 选项卡中的添加. 5.选择Microsoft Access Drive ...

  2. 机器学习:2.NPL自然语言处理

    1. 词带的简单解释: 每一个词出现了多少次,缺点是不知道顺序 2.seq2seq自然语言处理的核心 RNN: 一对一:输入一个,输出一个 一对多:输入一个,输出多个 多对一:输入多个,输出一个 多对 ...

  3. 610K图纸打印新版增值税发票不完整的调整方法 黑盘红盘都兼容

    新版增票页面设置增票向下0.8向右-10,5刻度进纸测试 向右调整可能会有些出入 根据情况微调即可. 下面为黑盘的设置 可与上面兼容

  4. spring boot整合quartz定时任务案例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  5. vim 批量添加删除注释

    vim中单行注释只是多行注释的一个特例,这里统一进行多行注释的讲解 (1)添加批量注释 ctrl+v 进入列编辑模式,向下或向上移动光标,把需要注释的行的开头标记起来,然后按大写的I(shift+i) ...

  6. string 、char* 、 char []的转换

    1.string->char* (1)data string s = "goodbye"; const char* p=str.data(); (2)c_str() stri ...

  7. vue双向数据绑定对于数组和新增对象属性不能监听的解决办法

    出现数组不能按照索引进行跟新的原因是处于性能考虑的,但是整体数组的增加删除是可以监听到的:对于对象新增属性不能监听是因为没有在生成vue实例时候放进watcher收集依赖. 首先我们先来了解vue数据 ...

  8. Strassen __128int

    题目链接 题意思路很简单,递归求最小就好了.但__128int没见过.故写博客记下.__128int如果输入输出就要自己写函数. #include<bits/stdc++.h> using ...

  9. Linux下安装mysql教程

    Linux下安装mysql  MySQL官网:https://dev.mysql.com/downloads/mysql/ 到mysql官网下载mysql编译好的二进制安装包,在下载页面Select ...

  10. pve之命令

    pvesr list ha-manager status pvecm nodes pvecm status pveperf qm list root@cu-pve06:~# pvesr list Jo ...