Owl Carousel Slider w/autoWidth初始猫头鹰阶段问题

编程问答 2022-05-12

问题描述

我在 Webflow 中使用猫头鹰轮播，但不知道为什么它不起作用。

问题来了：

在第一次加载时，轮播图如下所示： Image: On Load

刷新时，它会更正一些，但随后会跳动！ Image: On Refresh

再次刷新后，它看起来很完美，而且工作正常。 Image: On Refresh #2

我试图让 owl-stage 有一个最小宽度，但这完全禁用了滑块。我添加了一个加载功能来修复滑块的某些方面，但并不完美。 这是一个供您查看的链接：https://edits-52c37b.webflow.io/product/circus-wood

这是我的代码：

<script>
$(window).on('load',function() {

$('.projects-col-list.w-dyn-items').owlCarousel({

        margin: 8,center:true,nav: true,loop:true,autoWidth:true,animateIn:true,navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],items:3     
  
             });
     });
</script>

解决方法

我用这种方法解决了同样的问题 - 我希望它也能帮助你 带有就绪函数的 setTimeout

$(document).ready(function() {
  setTimeout(function(){ 
    $('.projects-col-list.w-dyn-items').owlCarousel({
      margin: 8,center:true,nav: true,loop:true,autoWidth:true,animateIn:true,navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],items:3     
    }).fadeIn();
  },1500);
});
.projects-col-list.w-dyn-items {
  opacity: 0;
}

,

非常感谢@Emy 帮助我找到解决方案！

我发现我的 owl-stage 不能使用 display: flex，所以我将其更改为显示块，现在我将 display flex 添加到集合列表中并且它起作用了！这是我的有效代码：

$(document).ready(function() {
  setTimeout(function(){ 
    $('.projects-col-list.w-dyn-items').owlCarousel({
      margin: 8,1500);
});

我没有包含代码：

.projects-col-list.w-dyn-items {
  opacity: 0;
}

因为它似乎对我不起作用。希望这对某人有所帮助，我可能会为此制作一个教程，以便其他人可以像这样在 webflow 中构建一个很酷的滑块！ :)

htmljqueryowl-carouselwebflow