swiper轮播图如何兼容IE

于 2023-05-26 10:33:12 发布
阅读量656 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59749798/article/details/130881431
版权

swiper有多个版本运用，适用于不同的环境

swiper2兼容IE8,IE9和其他的游览器！！

swiper3适用于移动端操作！！

swiper4则是可兼容IE10+之上的！！

一般做IE的兼容我用的都是swiper2版本的，大部分游览器和IE都可以使用。但是当我切换到IE10，IE11测试的时候，发现轮播到第二张图片的时候就会停止，从网上也找不到有效的方法。之后去官网看了下，发现官网的demo切换到IE10+也会出现这样的情况，当然把autoplay切换时间切换为true的话可以循环一次，无限循环失效。以下是demo。。

查资料后感觉最好的方法就是下载两个swiper，一个版本2一个版本4.。swiper4用于IE10+，swiper2用于IE8+

判断IE的版本来切换swiper。

以上是个人见解，希望对你有所帮助。。

 

前端练习kun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
IE11兼容性问题完美解决（用户代理字符串）
09-11
IE11兼容性问题完美解决（用户代理字符串），用于解决win8/win8.1下IE11的兼容性问题
swiper@4.5.1兼容ie
07-04
swiper@4.5.1兼容ie Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
swiper兼容IE
热门推荐
鱼儿哟
06-29 1万+
//引入资源文件 //HTML代码                                                                    slide1                                                    slide2
swiper的兼容性（IE、chrome等）
weixin_43074269的博客
06-05 1万+
前几天在开发页面过程中，使用到的swiper插件做轮播图时，遇到了一些问题，chrome、360、QQ浏览器中都能正常显示，在IE10浏览器中显示正常，但是在IE9及以下不能使用。 原因：swiper插件适用于移动端，PC端上面有版本兼容问题，在IE9及以下，使用swiper2的任何版都可以，swiper2 还是很强大的；在IE10以上，以及其他的浏览器，swiper的版本都可以用。所以现在大家在...
swiper实现兼容 ie8浏览器
weixin_45791806的博客
03-29 780
声明:这里我用的是swiper2版本,上代码: HTML代码: <div class="swiper-container mn-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="" title="">1</a>
解决vue-awesome-swiper的4.1.1版本不兼容ie问题
00年女程序员分享自己的学习笔记
02-03 806
使用vue-awesome-swiper的4.1.1版本的组件，并且在main.js中引入，导致整个vue项目都无法在ie中打开。 内网电脑（无法使用npm install）更改版本过程，用外网电脑新创建了一个项目，然后运行npm install vue-awesome-swiper@3.1.3下载完成之后，找到此项目的node_modules然后根据此文件夹文件更改的时间顺序找到刚才下载的文件并且将他们替换内网项目的node_modules的对应文件即可。
Swiper制作图片轮播切换特效
07-24
Swiper制作图片轮播切换特效是一款swiper基于css3属性制作的带索引条进度缓冲图片轮播展示特效。
swiper焦点轮播图实例
04-23
前端开发swiper焦点图实例，类似于https://www.swiper.com.cn/demo/web/index.html所示效果。
基于swiper图片文字切换代码
06-24
基于swiper图片文字切换代码是一款基于swiper4的图文列表轮播，适用于团队成员以及产品介绍。
swiper倾斜图片左右切换特效
06-24
swiper倾斜图片左右切换特效是一款倾斜图片布局，鼠标悬停图片翻转，点击图片弹窗放大预览效果。
vue-awesome-swiper兼容ie9
qq_42853570的博客
02-27 609
vue-awesome-swiper兼容ie9采用swiper采用SuperSlide采用vue-awesome-swiper 采用swiper 目前只支持2.6.7，3版本以上暂不支持，否则样式会出现问题； 缺点：但是在2.XX的版本中，只能单独分页轮播，无左右分页轮播，支持ie9及以上 官网地址： 示例： 采用SuperSlide 目前支持ie8以及以上，有分页轮播， 缺点：灵活性没有swiper专业 官网地址： 示例： 采用vue-awesome-swiper 目前支持ie10及以上 官网地址： 示例
IE兼容swiper
weixin_30618985的博客
02-28 317
swiper3能完美运用在移动端，但是运用在PC端，特别是IE浏览器上不能兼容，没有效果，要使IE兼容Swiper的话必须使用swiper2，也就是idangerous.swiper.js, 下载地址是http://2.swiper.com.cn/download/index.html#file1 但是swiper2的API与swiper3的不同，需要根据swiper2的API来具体运用。 ...
swiper ie11版本兼容调整
m0_37246056的博客
10-16 3618
vue中使用swiper实现轮播图功能，package.json使用版本如下 "swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1", 在chrome中轮播图功能正常使用，是用ie11访问时，页面加载产生异常<SCRIPT1002: 语法错误> 参考ie 报 SCRIPT1002: 语法错误 将package.json中版本调整 "swiper": "^3.4.2", "vue-awesome-swip
nuxt.js 中使用vue-awesome-swiper不兼容ie11
Rachel的博客
08-05 1507
问题： 在nuxt.js中使用vue-awesome-swiper 在ie11浏览器下报错，导致页面一片空白
项目使用Swiper4兼容小于IE11方案
Baron的技术blog
09-18 1191
兼容IE
vue 使用swiper时，ie浏览器的兼容问题
ZCJSGSZ的博客
11-27 1052
vue项目使用swiper时，无法兼容ie浏览器。 解决办法：引入swiper，在页面上使用div class命名的方式 plugins: [ "@/plugins/swiper", ] <div class="swiper-box"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide class="swiper-s.
Vue 使用swiper4导致ie或手机浏览器打开空白的问题
weixin_34393428的博客
09-15 575
from:https://segmentfault.com/a/1190000015831092在ie下发现就是swiper的不兼容，一加上去ie就不显示了。结果是swiper版本的问题，最新的swiper4在ie中显示就是会出问题，将版本降到3.4.2就可以显示了。同时注意swiper3和4的定义方式以及一些方法有些不一样，要做一些改动。npm install --save-dev swi...
IE11兼容
u014717791的博客
09-13 623
本人小白，最近在重构vue项目，记录下ie兼容问题 项目package.json： babel.config.js如下 开发环境下IE浏览器一片空白。 查找了好多资料，都是安装babel-profill或者promise,我挨个测了都没效果， 因此从根本性每个组件一个一个测，最后发现是我安装第三方插件swiper导致IE控制台报错， 如上图我安装的是swiper@5.x版本的，估计是ie暂时不兼容这个版本的swiper， 于是我卸载了它，安装vue-awesome-sw...
解决swiper3.0版本在IE浏览器不兼容问题以及VUE箭头函数在IE浏览器里面不兼容
sunnyboysix的博客
08-08 5844
VUE箭头函数在IE浏览器不兼容 myArray.forEach(=&gt;{ ..................... }     把=&gt;改成function（xxx） IE不支持很多VUE的写法，自己可以参考一下ES6   swiper3.0版本在IE上兼容性很差的，公司最新的项目用了3.0的swiper在谷歌浏览器上OK，但是到了IE  9 10 11就没办法正常显...
Swiper 轮播图
最新发布
09-21
Swiper是一款流行的轮播图插件，可以用于在网页或小程序中展示图片、文字等内容。您可以通过安装swiper插件并引入相关样式文件，然后在逻辑层进行配置和使用。具体步骤如下： 1. 在逻辑层的mine.js文件中，定义轮播图的数据，例如imgUrls数组保存图片的链接。 2. 安装并使用swiper插件，可以通过npm install swiper@3 --save-dev命令进行安装。 3. 在main.js文件中，引入Vue、App、router和store，然后引入swiper的样式文件，例如import 'swiper/dist/css/swiper.min.css'。 4. 在Vue实例中，配置router和store，并在render中渲染App组件。 通过以上步骤，您就可以在小程序中使用Swiper轮播图了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值