【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题

简言

最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。

解决过程

  1. 分析属性是否使用错误。
    loop是循环模式,布尔型。
    slides-per-view是同屏显示多少数量,数值型或’auto’。
  2. 更改的样式是否是诱因。
    不是。
  3. 看官网,百度。
    百度不到相似bug,看官网。发现loop属性描述有限制性描述。
    在这里插入图片描述
  4. 最后寻找替代方案,或者降低需求。
    没到这步。

问题原因

官网loop属性时描述有这样一句话。

Because of nature of how the loop mode works (it will rearrange
slides), total number of slides must be >= slidesPerView * 2

意思就是 你的数据要大于等于 一屏显示数量的两倍
在这里插入图片描述

解决方案

  • 数据搞多点。
  • slides-per-view属性值调小。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/57563.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

etcd

文章目录 etcd单机安装设置键值对watch操作读取键过往版本的值压缩修订版本lease租约(过期机制)授予租约撤销租约keepAlive续约获取租约信息 事务基于etcd实现分布式锁原生实现官方 concurrency 包实现 服务注册与发现Go 操作 Etcd 参考 etcd etcd 是一…

一起来看看 Compose Accompanist

好久不见,真的挺久了,之前一个月写的文章比现在多半年的都多。今年第一篇文章是简单写了下 Android 14 的适配:Android 14 又来了?别扶!抬起我来吧! 今天咱们来一起看看 Compose Accompanist 吧&#xff0…

创意项目管理软件推荐:满足客户需求的完美解决方案

发现功能强大的工作管理软件,让创意大放异彩。将您团队的愿景变成引人注目的项目。 一、交付总是令人印象深刻的工作 Zoho Projects的创意项目管理软件可帮助您和您的团队在一个地方监督多个项目。使用我们的内置管理工具和模板,花更少的时间在管理上&a…

普及100Hz高刷+1ms响应 微星发布27寸显示器:仅售799元

不论办公还是游戏,高刷及低响应时间都很重要,微星现在推出了一款27寸显示器PRO MP273A, 售价只有799元,但支持100Hz高刷、1ms响应时间,还有FreeSync技术减少撕裂。 PRO MP273A的100Hz高刷新率是其最大的卖点之一&#…

[每周一更]-(第57期):用Docker、Docker-compose部署一个完整的前后端go+vue分离项目

文章目录 1.参考项目2.技能点3.GO的Dockerfile配置后端的结构如图Dockerfile先手动docker调试服务是否可以启动报错 4.Vue的Dockerfile配置前端的结构如图nginx_docker.confDockerfile构建 5.docker-compose 整合前后端docker-compose.yml错误记录(1)ip端…

macOS下Django环境搭建-docker运行Django

1. macOS升级pip /Library/Developer/CommandLineTools/usr/bin/python3 -m pip install --upgrade pip 2. 卸载Python3.9.5版本 $ sudo rm -rf /usr/local/bin/python3 $ sudo rm -rf /usr/local/bin/pip3 $ sudo rm -rf /Library/Frameworks/Python.framework 3. 安装P…

Shiro是什么?为什么要用Shiro?

前言 本文小新为大家带来 Shiro入门概述 相关知识,具体内容包括Shiro是什么,为什么要用 Shiro,Shiro与Spring Security 的对比,Shiro的基本功能(包括:基本功能框架,功能简介)&#x…

【六袆 - 国际化】SpringBoot国际化Message

模拟场景校验请求参数 private void checkParam(List<ReqAppAdminDTO> req) {// 校验管理员如果已存在&#xff0c;则抛出已存在异常req.forEach(item -> {AppAdminDO appAdminDO appAdminMapper.selectByAppIdAndAdminNo(item.getAppId(), item.getAdminNo());if (O…

Jmeter命令行运行实例讲解

1. 简介 使用非 GUI 模式&#xff0c;即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资 本文介绍windows下以命令行模式运行的方法。 1.1. 命令介绍 jmeter -n -t <testplan filename> -l <listener filename> 示例&#xff1a; jmeter -n -t test…

跨境商城系统源码的优势,助力企业海外扩张

跨境电商发展背景与趋势 随着全球化的推进和互联网技术的快速发展&#xff0c;跨境电商已成为企业海外拓展的重要途径。然而&#xff0c;跨境电商面临着诸多挑战&#xff0c;如复杂的海外市场、文化差异、海关监管等。为了解决这些问题&#xff0c;企业可以借助跨境商城系统源码…

试图将更改推送到 GitHub,但是远程仓库已经包含了您本地没有的工作(可能是其他人提交的修改)

这通常是由于其他人或其他仓库推送到了相同的分支上&#xff0c;导致您的本地仓库和远程仓库之间存在冲突。 错误信息&#xff1a; To github.com:8upersaiyan/CKmuduo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to github.com:8upers…

无涯教程-Perl - continue 语句函数

可以在 while 和 foreach 循环中使用continue语句。 continue - 语法 带有 while 循环的 continue 语句的语法如下- while(condition) {statement(s); } continue {statement(s); } 具有 foreach 循环的 continue 语句的语法如下- foreach $a (listA) {statement(s); } co…