wordpress收费下载资源主题
wordpress付费下载资源插件

swiper幻灯片窗口大小变化以及container容器宽度变化时导致图片宽度问题

swiper幻灯片窗口大小变化以及container容器宽度变化时会导致图片宽度与容器宽度不一样,出现错乱,经过一番查询,可以在swiper的初始化里加以下代码

resizeObserver: true, //窗口容器变化
on: {
resize: function(){
this.update(); //窗口变化时,更新Swiper的一些属性,如宽高等
},
}

但是,这个代码仅对浏览器窗口变化有效,container容器大小变化时无效,那么怎么解决呢?

可以动态获取容器的宽度,修改容器的宽度,但是我们不能直接获取容器的宽度,只能通过窗口的宽度减去其他div的宽度,计算出最新的容器的宽度。

var ddd = window.innerWidth - 90 - $(".sidebar-left").width();
swiperHome.el.style.width = ddd+'px';

大概就是这样,解决了困扰我俩小时的问题。

wordpress香港VPS

0 个评论

定制开发
本站承接WordPress等系统建站仿站、二次开发、主题插件定制等开发服务
在线咨询
  • 请直接说明需求,勿问在否

在线咨询
本站承接WordPress建站仿站、二次开发、主题插件定制等开发服务!

了解详情