首页 > 其他分享 >swiper插件加载时宽度显示错误

swiper插件加载时宽度显示错误

时间:2023-04-03 11:22:32浏览次数:45  
标签:插件 跳转 滑动 加载 swiper 页面

最近在使用swiper插件编写滑动轮播图,要求一次显示多个图片,但出现了一个问题,首次进入没问题,但跳转页面返回后图片宽度会发生变化,大致情况如下:

这是正常情况,可以左右滑动
js代码如下:

但页面跳转返回后,页面就变成了这种:

并且左右滑动也会有各种问题。

后来上网查了一下原因,发现出现这种问题的原因是swiper隐藏后重新加载显示导致的,修改方法也很简单,在js里新增两个属性就行。
修改后的代码如下:

这样就没问题了!

标签:插件,跳转,滑动,加载,swiper,页面
From: https://www.cnblogs.com/s272/p/17282553.html

相关文章

  • 网页打印(不使用插件的情况下)
    //剔除不需要打印的部分functionContrarypreview(){bdhtml=document.body.innerHTML;sprnstr="<!--startprint-->";eprnstr="<!--endprint-->";vartophtml=bdhtml.substr(0,......
  • VS2017 未能正确加载“ReferenceManagerPackage”包
    MicrosoftVisualStudio未能正确加载“ReferenceManagerPackage”包。1.以管理员身份打开DeveloperCommandPromptforVS20172.定位到你的vs2017的安装目录我安装的是企业版就是E:\ProgramFiles(x86)\MicrosoftVisualStudio\2017\Enterprise\Common7\IDE\PublicAssemblies......
  • vue3 - 引入自定义插件的组件的具体写法
    1.背景我的这一篇随笔详细讲解组件怎么制作与引入使用【vue3-在单独的项目制作自定义组件插件,支持vite【前提不要使用webpack专属语法】,并引入插件-心得-岑惜-博客园(cnblogs.com)】但在局部引入组件时,eslint红色警告   引用名言:“又不是不能用==”强迫症看着实......
  • nginx 热加载stream模块
    报错:nginx:[emerg]unknowndirective"stream"in/usr/local/nginx/conf.d/ssh.conf判断模块是否存在 进入二进制部署包解压后目录 添加模块,与之前加载的模块一致,并新添加 --with-stream模块./configure--prefix=/usr/local/nginx--user=nginx--group=nginx......
  • Mybatis之数据库连接+PageHelper分页插件+Mybatis-Plus插件
    MyBatisPlus教程(人人便成为)https://www.cnblogs.com/chch213/p/16320820.html前言ORM框架:对象关系映射 objectrelationalmapping 半自动ORM映射工具(自己编写sql语句)  Hibernater属于全自动映射规则:数据库表>类|表字段>类的属性|表数据>对象 JDBC操......
  • jquery加载页面的方法(页面加载完成就执行)
    jquery加载页面的方法(页面加载完成就执行) 转自 http://www.jb51.net/article/27444.htm jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。 1、$(function(){ $("#a").click(function(){ //addin......
  • java使用模块后,用maven打包时,需要保护的maven插件
    <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.0</version><configuration><release>11</release><......
  • 类加载机制-打破双亲委派机制
     1.什么是双亲委派机制双亲委派机制是Java类加载器的一种工作机制,它的主要思想是:如果一个类加载器收到了类加载请求,它首先不会自己去尝试加载这个类,而是把这个请求委托给父类加载器去完成。如果父类加载器还存在父类加载器,则进一步向上委托,依次递归,直到委托到最顶层的启动类加......
  • 安装grafana并且安装插件
      安装:到清华源去下载Indexof/grafana/yum/rpm/Packages/|清华大学开源软件镜像站|TsinghuaOpenSourceMirror  安装:yumlocalinstall grafana-6.3.0-1.x86_64.rpm-yComplete![root@zabbix-server~]#grafana-grafana-cligrafana-server[root@zabbix......
  • 5.clone plugin(克隆插件)的限制
    1.在使用ClonePlugin时,注意以下限制:克隆期间,会阻塞DDL。同样,DDL也会阻塞克隆命令的执行。不过从 MySQL8.0.27开始,克隆命令不会阻塞Donor上的DDL。ClonePlugin不会拷贝Donor的配置参数。ClonePlugin不会拷贝Donor的Binlog。ClonePlugin只会拷贝Inno......