光滑的旋转木马在移动设备上显示垂直而不是水平

如何解决光滑的旋转木马在移动设备上显示垂直而不是水平

我的 webflow 站点中有一个 Slick Carousel。台式机、平板电脑工作正常，但是当我切换到移动设备时，项目以垂直顺序而不是水平顺序堆叠。有趣的事实是，当我打开 chrome 开发工具并将页面的宽度压缩到移动设备时，它工作正常，但当我实际使用移动响应按钮或我的手机时，它是垂直的。

我的JS：

const slider = $('.c-slick_slider');
slider.slick({
    infinite: false,centerMode: false,slidesToShow: 3,slidesToScroll: 1,dots: false,variableWidth: true,prevArrow: $('.c-slick_arrow.cc-left'),nextArrow: $('.c-slick_arrow.cc-right'),responsive: [
    {
      breakpoint: 989,settings: {
        centerMode: true,slidesToShow: 1,variableWidth: false,infinite: false,vertical: false,}
    }]
  });

网站链接：https://refokus-c0da71.webflow.io/

如果你想要这个部分的html

<div class="c-slick"><div class="c-slick_slider slick-initialized slick-slider"><div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 35000px; transform: translate3d(-14px,0px,0px);"><div class="c-slick_item slick-slide slick-current slick-active" tabindex="0" style="" data-slick-index="0" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide slick-active" tabindex="0" style="" data-slick-index="1" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide slick-active" tabindex="0" style="" data-slick-index="2" aria-hidden="false"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="0">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="3" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="4" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="5" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div><div class="c-slick_item slick-slide" tabindex="-1" style="" data-slick-index="6" aria-hidden="true"><div class="c-slick_item_date">Jan 2021</div><h1 class="c-slick_item_heading">Fast Track Your Digital Transformation With Low-Code</h1><a href="#" class="s-slick_item_link" tabindex="-1">Read Article</a></div></div></div></div><div class="c-slick_arrows"><div class="c-slick_arrow cc-left slick-arrow slick-disabled" style="" aria-disabled="true"><div class="c-slick_arrow_text"></div></div><div class="c-slick_arrow cc-right slick-arrow" style="" aria-disabled="false"><div class="c-slick_arrow_text"></div></div></div></div>

谢谢，感谢任何帮助

解决方法

对于代码的以下部分，添加 display: 'flex'。

<div class="slick-track" ....

当前默认为display: 'block'，所以当宽度较小时，它会自动垂直环绕。