Question

我正在创建一个新模板网站一周以上，我无法在移动设备上使用我的滑块。我优化了应该如何看，但我不能向下滚动移动滑块，网站的其余部分完美地工作。我试过了触摸动作：自动; -ms-touch-action：auto; 在滑块div中，它只是忽略它。我看了整个互联网，但没有一个解决方案似乎工作。

滑块下面的两个箭头和点（图中标记的红色）是可触摸和工作的，但每当我尝试滚动图片或文本时根本没有响应。 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>

也是原始网站的链接，它是MENU下方的大滑块。对于有铬和检查元素的人来说可能更容易

Answer 1

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

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

CSS滑块无法在移动版

1 个答案: