html - Slick-slider 无法在移动设备上滚动

Question

目前我一直忙于编辑 Wordpress 主题(Bronx 拖放)。我使用这个主题是因为客户希望能够自己进行调整。

Slick Slider 是一种仅在移动设备上显示的水平图像轮播，它不会让用户将图像滚动到页面下方，因为它使用水平滑动来浏览图片。

<div id="product-images" class="carousel slick product-images slick-initialized slick-slider" data-navigation="true" data-autoplay="false" rel="gallery" data-columns="1" data-asnavfor="#product-thumbnails"><button type="button" class="slick-nav slick-prev slick-arrow" aria-disabled="false" style="display: block;"></button>
<div aria-live="polite" class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 5112px;" role="listbox"><figure itemprop="image" class="easyzoom is-ready slick-slide" data-variation="" style="width: 568px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide10" data-slick-index="0" aria-hidden="true">
<a href="http://#2017/02/#_2076" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2076-640x700" title="#_2076"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready" data-variation="" style="width: 568px; position: relative; left: -568px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide11" data-slick-index="1" aria-hidden="true">
<a href="http://#2017/02/#_2077" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2077-640x700" title="#_2077"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready slick-current slick-active" data-variation="" style="width: 568px; position: relative; left: -1136px; top: 0px; z-index: 999; opacity: 1;" tabindex="-1" role="option" aria-describedby="slick-slide12" data-slick-index="2" aria-hidden="false">
<a href="http://#2017/02/#_2078" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="0"><# src="http://#2017/02/#_2078-640x700" title="#_2078"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready" data-variation="" style="width: 568px; position: relative; left: -1704px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide13" data-slick-index="3" aria-hidden="true">
<a href="http://#2017/02/#_2079" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2079-640x700" title="#_2079"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -2272px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide14" data-slick-index="4" aria-hidden="true">
<a href="http://#2017/02/#_2080" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2080-640x700" title="#_2080"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -2840px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide15" data-slick-index="5" aria-hidden="true">
<a href="http://#2017/02/#_2081" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2081-640x700" title="#_2081"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -3408px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide16" data-slick-index="6" aria-hidden="true">
<a href="http://#2017/02/#_2082" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2082-640x700" title="#_2082"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -3976px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide17" data-slick-index="7" aria-hidden="true">
<a href="http://#2017/02/#_2083" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2083-640x700" title="#_2083"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -4544px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide18" data-slick-index="8" aria-hidden="true">
<a href="http://#2017/02/#_2084" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2084-640x700" title="#_2084"></a>
</figure></div></div><button type="button" class="slick-nav slick-next slick-arrow" style="display: block;" aria-disabled="false"></button></div>

我已经尝试解决此问题 2 个多小时，但仍未找到解决方案。

欢迎所有帮助!

Answer 1

我遇到了同样的问题，将以下代码添加到我的 CSS 中解决了这个问题:

.slick-slider {
touch-action: auto;
-ms-touch-action: auto;
}

您可以在此处找到有关此问题的更多信息:https://github.com/kenwheeler/slick/issues/449