Slick pinch zoom mobile

Question

大家早上好，

我在prestashop中(在产品页上)使用精巧的滑块库来显示产品图像，而在移动设备上，用两个手指无法放大图像。我在网上看过，有些人说要从.slick-slider类中删除pan-y，我在css中没有这些参数。你有没有其他的解决方案可以在移动设备上使用？

<div class="images-container">

<div class="product-cover slick-initialized slick-slider slick-dotted" role="toolbar">
                      <div aria-live="polite" class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 4962px;" role="listbox"><li data-src="/165589-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 827px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="-1" role="option" aria-describedby="slick-slide00">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb selected " data-image-medium-src="/165589-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165589-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165589-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II" title="Baskets bleu homme Diadora K-Run II" itemprop="image">
        </li><li data-src="/165590-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide" data-slick-index="1" aria-hidden="true" style="width: 827px; position: relative; left: -827px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide01">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb" data-image-medium-src="/165590-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165590-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165590-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II pas cher" title="Baskets bleu homme Diadora K-Run II pas cher" itemprop="image">
        </li><li data-src="/165592-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide" data-slick-index="2" aria-hidden="true" style="width: 827px; position: relative; left: -1654px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide02">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb" data-image-medium-src="/165592-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165592-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165592-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II talon" title="Baskets bleu homme Diadora K-Run II talon" itemprop="image">
        </li><li data-src="/165593-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide" data-slick-index="3" aria-hidden="true" style="width: 827px; position: relative; left: -2481px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide03">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb" data-image-medium-src="/165593-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165593-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165593-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II dessus" title="Baskets bleu homme Diadora K-Run II dessus" itemprop="image">
        </li><li data-src="/165594-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide" data-slick-index="4" aria-hidden="true" style="width: 827px; position: relative; left: -3308px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide04">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb" data-image-medium-src="/165594-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165594-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165594-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II semelle" title="Baskets bleu homme Diadora K-Run II semelle" itemprop="image">
        </li><li data-src="/165595-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" class="thumb-container slick-slide" data-slick-index="5" aria-hidden="true" style="width: 827px; position: relative; left: -4135px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide05">
            <img onclick="zoomImage(event);" style="margin: auto;" class="thumb" data-image-medium-src="/165595-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" data-image-large-src="/165595-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" src="/165595-large_default/baskets-bleu-homme-diadora-k-run-ii.jpg" alt="Baskets bleu homme Diadora K-Run II destockage" title="Baskets bleu homme Diadora K-Run II destockage" itemprop="image">
        </li></div></div>
</div>

谢谢你的帮助。

Answer 1

问题出在slick.css中的代码行中：

-ms-touch-action: pan-y; touch-action: pan-y;

您可以删除它们或尝试

.slick-slider {
    touch-action: auto !important;
}