Tab切换Swiper轮播图

缺乏、安全感 2022-05-24 07:42 354阅读 0赞

Swiper对于各位前端的朋友实在是福音，不仅开源，最关键但是好用。

Swiper地址：[http://www.swiper.com.cn/][http_www.swiper.com.cn]

最近因为项目上的需求，需要切换两个轮播图。于是出现了一个很尴尬的问题，第一个Swiper可以正常切换，但是第二个轮播图却无法正常运行，卡顿。

检查了代码后发现问题主要来源于display:none;

我加上了这个隐藏属性后，第二个轮播一定会出问题。

最终解决方式：

1）需要加上这两个属性

observer:true,//启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。  
默认false，不开启，可以使用[update()][update]方法更新。

observeParents:true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新

2）将display:none;这个隐藏的css换一中隐藏方式。

.hide\{visibility: hidden;position: absolute;z-index: -1;height: 0;\}

3）因为是有多个轮播图的，所以在实例化的时候，不能使用相同类型，最好分开。

var swiper = new Swiper('这里需要更改', \{   
    pagination: \{

el: '这里需要更改',

clickable: true,

\},

\});

演示Demo:[https://brights2017.gitee.io/test1/test1-12/][https_brights2017.gitee.io_test1_test1-12]

github下载地址：[https://github.com/struggle20160730/test1.git][https_github.com_struggle20160730_test1.git]

**您的支持是对我最大的鼓励。**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]**

[http_www.swiper.com.cn]: http://www.swiper.com.cn/
[update]: http://www.swiper.com.cn/api/methods/257.html
[https_brights2017.gitee.io_test1_test1-12]: https://brights2017.gitee.io/test1/test1-12/
[https_github.com_struggle20160730_test1.git]: https://github.com/struggle20160730/test1.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220524/60cda2eed90c40efa8109250bbfef797.png