时间戳

首页 > 解决方案 > 光滑的滑块捏缩放移动

css - 光滑的滑块捏缩放移动

问题描述

大家早上好，

我在 prestashop（在产品表上）中使用光滑的滑块库来获取产品图像，而在移动设备上，用 2 个手指无法放大图像。我在网上看过几个人说要从 .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>

谢谢您的帮助。

标签： cssprestashopslick.js

解决方案

问题在于 slick.css 中的行：

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

您可以删除它们或尝试

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

推荐阅读