Owl Carousel Slider w/ autoWidth（初始猫头鹰阶段问题）答案

【问题标题】：Owl Carousel Slider w/ autoWidth (Initial owl-stage issue)Owl Carousel Slider w/ autoWidth（初始猫头鹰阶段问题）
【发布时间】：2021-04-23 00:14:48
【问题描述】：

我在 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>

【问题讨论】：

标签： html jquery css owl-carousel webflow

【解决方案1】：

我用这种方式解决了同样的问题 - 我希望它也能帮助你带就绪功能的 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;
}

【讨论】：

嘿，艾米，非常感谢，不幸的是，现在幻灯片在初始时跳动，并在 1 次重新加载后修复。我还能做些什么来使滑块在初始加载时表现良好？

【解决方案2】：

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

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

$(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;
}

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

【讨论】：