Javascript 在移动设备上显示垂直而不是水平的光滑旋转木马
我在我的webflow网站上有一个圆滑的旋转木马。台式机和平板电脑都很好用,但当我切换到移动设备时,这些东西是垂直排列的,而不是水平排列的。有趣的事实是,当我打开chrome开发工具并将页面宽度压缩到手机上时,它工作正常,但当我实际使用手机响应按钮或手机时,它是垂直的 我的JS:Javascript 在移动设备上显示垂直而不是水平的光滑旋转木马,javascript,html,css,slick.js,webflow,Javascript,Html,Css,Slick.js,Webflow,我在我的webflow网站上有一个圆滑的旋转木马。台式机和平板电脑都很好用,但当我切换到移动设备时,这些东西是垂直排列的,而不是水平排列的。有趣的事实是,当我打开chrome开发工具并将页面宽度压缩到手机上时,它工作正常,但当我实际使用手机响应按钮或手机时,它是垂直的 我的JS: const slider = $('.c-slick_slider'); slider.slick({ infinite: false, centerMode: false, slidesToS
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,
}
}]
});
链接至网站:
如果您需要该部分的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>
2021年1月用低代码快速跟踪数字转型2021年1月用低代码快速跟踪数字转型2021年1月用低代码快速跟踪数字转型2021年1月用低代码快速跟踪数字转型2021年1月用低代码快速跟踪数字转型2021年1月快速跟踪数字转型低代码转换Jan 2021快速跟踪低代码数字转换
感谢您的帮助对于代码的以下部分,请添加
显示:“flex”
<div class="slick-track" ....
以下是我认为它可以帮助您的示例。谢谢,它帮助了您,我现在必须修复项目的宽度,但这将很容易,我想很高兴能够提供帮助:)。如果你被卡住了,也要张贴你的宽度问题。我只是在每件物品的95vw上增加了宽度,每边都增加了2.5vw的边距。@stranavad是的,这是实现它的一种方法。还记得添加max width
,这样元素就不会增长太多。