swiper在IE8下失效

最新推荐文章于 2022-04-26 11:38:55 发布
原创 最新推荐文章于 2022-04-26 11:38:55 发布 · 2w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie 8 #插件 #轮播图 #循环

最近在做一个轮播的效果。找到了swiper这个插件。在移动端用着挺好的。但是在PC端的话，IE下效果全部失效。后来了解到，swiper3是专门针对移动端写的。如果想兼容IE8的话，应该引入swiper2.
也就是：idangerous.swiper.js。
另外还有一个Js可以兼容ＩＥ８，用着也还不错：jquery.SuperSlide.2.1.1.js。待会上传资源，有需要的可以去下载。
有不明白的，可微博找我。
微博：璐飞童鞋；后来发现，一旦忙起来，微博也不上的，置顶文章里边我新建了一个微信群，方便大家交流。有需要的小伙伴可以加起来啦

如何在ie8下使用swiper
qq_33374198的博客
05-28 3042
emmmmm 又来写关于万恶的ie8下的东西啦我是小白 所以 我的文章都是自己的一些小挫折然后mark下的swiper在官方文档中好像已经有4出现了，但是用的比较多的都是3，然而3不兼容到ie8和9，因此如果要兼容到8和9的就使用2吧，千万不要去相信那些什么鬼用2的js去用3的内容。这次遇到的挫折：由于2 是没有左右按钮的，然后根据官网文档有个swipeNext（）和swipePrev（）方法去控...
项目使用Swiper4兼容小于IE11方案
Baron的技术blog
09-18 1304
兼容IE
swiper2兼容ie8浏览器问题
Blablabla_的博客
10-18 699
目前swiper2的版本才兼容ie8 1.分页按钮问题： <div class="swiper-container" style="height: 545px"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner1.png" cla...
swiper实现兼容 ie8浏览器
weixin_45791806的博客
03-29 890
声明:这里我用的是swiper2版本,上代码: HTML代码: <div class="swiper-container mn-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="" title="">1</a>
swiper3.4 IE8兼容性问题
wangqiuchen_Study的专栏
01-06 1万+
swiper3.4在IE8下面会报错，换成idangerous.swiper-2.1.min.js就好了，资源已上传！！！
Swiper2兼容IE8
Bright2017的博客
06-10 6713
习惯性了使用最新的Swiper4，但是最近项目需要兼容IE8就让我很不爽了。还好Swiper2也是很棒的。官网演示地址：http://2.swiper.com.cn/demo/刚刚去查看的时候没有发现单独打开的演示按钮，看了源码才知道，自己把路径添加进去就可以看了。单独查看的路径：http://2.swiper.com.cn/demo/01-default.html&lt;!doctype htm...
兼容ie方案：浏览器报Set未定义
Baron的技术blog
04-26 1239
报错原因： 由于项目中使用了Swiper4，其内部的css样式使用了display:flex ，不支持IE11之前的版本。项目会在IE11之前的浏览器报Set未定义，导致项目中的很多功能失效。 具体解决 找到对应问题页面，引入下面代码： <script src="https://ss.xgo-img.com.cn/pc/js/ieTipModal.js"></script> <link rel="stylesheet" href="//ss.xgo-img.com.cn/pc/
微信小程序开发问题之wx.previewImage
12-09
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。 那么他有哪些坑呢？ 我遇到的问题藏得比较深，我是在使用wxParse解析富文本时发现的。wxParse在解析img时会给它加上点击事件，那么...
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 2119
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
前端无缝滚动和switch切换是冲突的吗
最新发布
03-19
- **移动端Safari**：`position: sticky`在滚动容器中可能失效，需改用JavaScript实现吸附效果。 - **框架特性**： ```javascript // Vue中需注意响应式更新与DOM操作的时序 mounted() { this.initScroll(); //...
JS编写兼容IE6,7,8浏览器无缝自动轮播
12-02
项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！ 但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件 废话不多说，直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> [removed]</scrip
swiper插件在ie浏览器无反应，解决办法
qq_38179746的博客
09-16 1139
在写pc端页面时，用swiper插件发现在ie中用不了，百度下说是swiper从3以后向手机端发展，所以在pc端无响应。后来了解到，swiper3是专门针对移动端写的。如果想兼容IE8的话，应该引入swiper2.也就是：idangerous.swiper.js 官网演示地址：http://2.swiper.com.cn/demo/ swiper2下载...
swiper not define
weixin_41105030的博客
12-05 5658
swiper的一些错误以及解决 开源，免费，强大的触摸滑动插件 发现swiper未定义 swiper使用方法 下载地址 先新建.html测试一下我们的轮播图是否可用,按文档去正确引入 接着我们是否引入的是swiper-4.4.2\dist\js这个目录下的文件，引入的应该是dist下的js，而不是src文件夹下的或其他文件夹 引入到文件中，发现样式没错，但是没有办法实现轮播 我们的swipe...
解决swiper3.0版本在IE浏览器不兼容问题以及VUE箭头函数在IE浏览器里面不兼容
sunnyboysix的博客
08-08 6028
VUE箭头函数在IE浏览器不兼容 myArray.forEach(=&gt;{ ..................... }     把=&gt;改成function（xxx） IE不支持很多VUE的写法，自己可以参考一下ES6   swiper3.0版本在IE上兼容性很差的，公司最新的项目用了3.0的swiper在谷歌浏览器上OK，但是到了IE  9 10 11就没办法正常显...
关于ie浏览器兼容 报错无法获取未定义或null 引用的属性call
asd2437252087的博客
02-14 1万+
出错的原因：ie不支持新的 1.JavaScript语法新特性 2.新的cs特性 3. 新的JavaScript APi 或者 DOM API 这个时候我们就可以使用一个javascript编译器 首先先引入 方法一： 在main.js import 'babel-polyfill';//这样在入口文件中引入将增大文件大小 方法二：在.babelrc文件添加 { "presets": [ "es2015", "react" ], "plugins": [ ...
swiper在ie浏览器下不能兼容。
热门推荐
之度的博客
01-15 1万+
最近在做一个轮播的效果。找到了swiper这个插件。在移动端用着挺好的。但是在PC端的话，IE下效果全部失效。后来了解到，swiper3是专门针对移动端写的。如果想兼容IE8的话，应该引入swiper2.  参考网址http://www.qdfuns.com/notes/24424/fae71714914ba2e9a7c1e0aac5784df7.html
swiper的兼容性（IE、chrome等）
weixin_43074269的博客
06-05 1万+
前几天在开发页面过程中，使用到的swiper插件做轮播图时，遇到了一些问题，chrome、360、QQ浏览器中都能正常显示，在IE10浏览器中显示正常，但是在IE9及以下不能使用。 原因：swiper插件适用于移动端，PC端上面有版本兼容问题，在IE9及以下，使用swiper2的任何版都可以，swiper2 还是很强大的；在IE10以上，以及其他的浏览器，swiper的版本都可以用。所以现在大家在...
解决swiper在ie9以下不兼容问题
zhengxiuchen86的博客
04-09 2296
解决swiper在ie9以下不兼容问题
swiper的thumb点击之后失效
01-23
### Swiper Thumb 点击失效解决方案 当遇到 Vue 中 Swiper 的 thumb 功能点击后失效的情况，通常是因为初始化顺序或 DOM 渲染时机的问题所引起的。具体表现为拇指导航无法响应用户的交互操作，在某些情况下只有通过调试工具打开开发者模式才会恢复正常工作。 为了确保 Swiper 组件能够正确初始化并与其他框架组件协同工作，可以采取以下措施： #### 1. 延迟初始化 延迟 Swiper 实例化的时间点直到所有的子元素都已加载完成。这可以通过监听 `mounted` 生命周期钩子来实现，并且在该阶段调用 `$nextTick()` 方法以等待DOM更新完毕后再创建 Swiper 对象[^1]。 ```javascript import { ref, onMounted } from 'vue'; import SwiperCore, { Thumbs } from 'swiper/core'; // 使用Thumbs模块 SwiperCore.use([Thumbs]); export default { setup() { const thumbsSwiper = ref(null); onMounted(() => { this.$nextTick(function () { new Swiper('.mySwiper', { spaceBetween: 10, navigation: true, thumbs: { swiper: thumbsSwiper.value ? thumbsSwiper.value.swiper : null, }, }); }); }); return { thumbsSwiper, }; } } ``` #### 2. 防止重复实例化 如果页面存在多个相同类名的选择器，则可能会导致多次实例化的现象发生。为了避免这种情况的发生，可以在销毁当前视图之前先移除现有的 Swiper 实例[^2]。 ```javascript beforeDestroy() { if (this.mySwiper && typeof this.mySwiper.destroy === "function") { this.mySwiper.destroy(); } }, ``` #### 3. 检查样式冲突 确认是否有 CSS 样式上的干扰因素影响到了 Swiper 的布局结构或是触控事件的传递路径。特别是对于移动端浏览器而言，可能存在特定于 Safari 或者 iOS 设备上的特殊样式设置需求[^4]。 ```css /* 添加此CSS规则 */ .swiper-container { touch-action: pan-y; } /* 如果是在UniApp环境中开发的话还需要注意iOS下的兼容性问题 */ .u-tabbar { width: 100rpx !important; bottom: 120rpx !important; } ``` 以上方法可以帮助解决 Swiper Thumb 点击失效的问题，同时也提高了跨平台的一致性和稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值