使用jQuery对Owl Carousel生成的行内style值向下取整的方法问询

基础问题确认 #

可以通过jQuery修改元素的行内style属性值，调用jQuery自带的.css()方法即可直接操作指定样式属性，兼容性覆盖所有主流浏览器。

针对Owl Carousel间隙问题的实现方案 #

Owl Carousel提供了官方回调事件，所有回调都会在插件完成布局计算、生成行内样式后触发，刚好符合你的执行时机要求。具体实现逻辑如下：

• 绑定initialized.owl.carousel和resized.owl.carousel两个事件，前者覆盖首次初始化渲染场景，后者覆盖窗口尺寸变化后插件重新计算布局的场景
• 遍历需要处理的轮播元素，提取原始宽度值后通过Math.floor()方法向下取整，即可实现无论小数部分大小，仅保留整数部分的需求
• 将取整后的数值重新赋值给元素的行内width属性即可

代码示例 #

// 你的原有Owl Carousel初始化配置
$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  // 保留你原本的其他配置项
})
// 绑定插件布局完成后的回调事件
.on('initialized.owl.carousel resized.owl.carousel', function() {
  // 遍历所有轮播项元素处理宽度
  $('.owl-item', this).each(function() {
    // 提取原始宽度数值，自动忽略px单位
    const originalWidth = parseFloat($(this).css('width'))
    // 向下取整
    const processedWidth = Math.floor(originalWidth)
    // 重新设置行内宽度
    $(this).css('width', `${processedWidth}px`)
  })
})

如果需要处理轮播容器、内部图片等其他元素的宽度，调整回调内的选择器即可。

内容的提问来源于stack exchange，提问作者dubbs