CSS 滑块在移动设备上不滚动

Question

我在一个新的模板网站上工作了一个多星期，但我无法让我的滑块在移动设备上工作。我优化了它的外观，但我无法在移动设备上的滑块上向下滚动，网站的其余部分运行良好。我试过触摸动作：自动； -ms-触摸动作：自动；在滑块 div 中，但它只是简单地忽略它。我浏览了整个互联网，但 none 的解决方案似乎有效。

滑块下方的两个箭头和圆点（图片中标记为红色）可触摸且有效，但每当我尝试在图片或文本上滚动时都没有任何反应。 Mobile screenshot

有人可以帮忙吗？

滑块和图片CSS

.moto-widget-slider li img {min-height: 380px}

.moto-widget-slider li {
    text-align: center;
    width: 100%;
    z-index: 50;
    display: block;
    touch-action: auto;
    -ms-touch-action: auto;
 }

这是滑块 HTML 代码

<div class="moto-widget moto-widget-row row-fixed moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto" data-grid-type="sm" data-widget="row" data-spacing="aasa" style="">
    <div class="container-fluid">
        <div class="row" data-container="container">
            <div class="moto-widget moto-widget-row__column moto-cell col-sm-12 moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-auto moto-spacing-left-auto" style="" data-widget="row.column" data-container="container" data-spacing="aaaa">
                <div class="moto-widget moto-widget-container moto-container_header_5a5731da1" data-widget="container" data-container="container" data-css-name="moto-container_header_5a5731da1">
                    <div data-widget-id="wid_1515683748_4wypf2kcg" class="moto-widget moto-widget-slider moto-preset-default moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-auto moto-spacing-left-auto" data-widget="slider" data-preset="default">
                        <div class="bx-wrapper" style="max-width: 100%;">
                            <div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 480px;">
                                <ul class="moto-widget-slider-list" data-moto-slider-options="{&quot;slideshowEnabled&quot;:true,&quot;slideshowDelay&quot;:5,&quot;slideshowAnimationType&quot;:&quot;fade&quot;,&quot;showNextPrev&quot;:true,&quot;showPaginationDots&quot;:true,&quot;showSlideCaptions&quot;:true,&quot;itemsCount&quot;:3}" style="width: auto; position: relative;">
                                    <li aria-hidden="false" style="height: 480px; float: none; list-style: none; position: absolute; width: 461px; z-index: 50; display: block;">
                                        <div class="slider-text">Hiere is the Güde bla bla bla bla bla Text and lore ipsum bla bla bla bla bla</div>
                                        <a href="param=SHOP&amp;parameter=PAGE&amp;artref=40473&amp;command=3"><img src="../home/ivr/sliders/40473_bestes_produkt_2018_neu.jpg" alt="slider1-min.png"></a>
                                    </li>
                                    <li aria-hidden="true" style="height: 480px; float: none; list-style: none; position: absolute; width: 461px; z-index: 0; display: none;">
                                        <div class="slider-text">Hiere is the Güde WM bla bla bla bla bla Text and lore ipsum bla bla bla bla bla</div>
                                        <a href="http://www.guede.com/artwork/upload/guede/guede_wm_spielplan_2018.pdf"><img src="../home/ivr/sliders/wm_2018_neu.jpg" alt="slider1-min.png"></a>
                                    </li>
                                    <li aria-hidden="true" style="height: 480px; float: none; list-style: none; position: absolute; width: 461px; z-index: 0; display: none;">
                                        <div class="slider-text">Hiere is the Güde Best of 2018 bla bla bla bla bla Text and lore ipsum bla bla bla bla bla</div>
                                        <a href="param=SHOP&amp;parameter=PAGE&amp;artref=18033&amp;command=3"><img src="../home/ivr/sliders/18033_best_of_2018_neu.jpg" alt="slider1-min.png"></a>
                                    </li>
                                    <li aria-hidden="true" style="height: 480px; float: none; list-style: none; position: absolute; width: 461px; z-index: 0; display: none;">
                                        <div class="slider-text">Hiere is the Güde Hebetechnik bla bla bla bla bla Text and lore ipsum bla bla bla bla bla</div>
                                        <a href="param=SHOP&amp;parameter=PAGE&amp;tid=700000&amp;command=3"><img src="../home/ivr/sliders/hebetechnik_2017_neu.png" alt="slider1-min.png"></a>
                                    </li>

                                </ul>
                            </div>
                            <div class="bx-controls bx-has-controls-direction bx-has-pager">
                                <div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
                                <div class="bx-pager bx-default-pager">
                                    <div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a></div>
                                    <div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div>
                                    <div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div>
                                    <div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

还有一个来自原始站点的 link，它是菜单正下方的大滑块。对于 chrome 和 inspect element

的人来说可能更容易

Answer 1

您似乎在使用 bxslider，其中有一个设置名称 preventDefaultSwipeY 如果设置为 true，则不允许屏幕沿 y 轴移动。因此，在您的滑块配置中将其设置为 false。

$('.moto-widget-slider-list').bxSlider({
preventDefaultSwipeY: false;
});

CSS 滑块在移动设备上不滚动

CSS slider doesn't scroll on mobile

html

css

mobile

bxslider