html - CSS slider doesn't scroll on mobile

问题描述

I am working on a new template site over a week now and i cant get my slider work on a mobile. I optimised how it should look but i cant scroll down on the slider on mobile the rest of the site works perfectly. I tried the touch-action: auto; -ms-touch-action: auto; in the slider div but its just simply ignoring it. I looked all over the internet but none of the solutions seems to work.

The two arrows and the dots under the slider(red marked in the picture) is touchable and working but whenever i try to scroll over on picture or text no response at all. Mobile screenshot

Could somebody help with it please?

The slider and picture 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;
 }

Here is the slider HTML code

<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>

Also a link from the original site, its the big slider right under the MENU. Maybe easier for somebody with chrome and inspect element

标签： htmlcssmobilebxslider

html - CSS slider doesn't scroll on mobile

问题描述

解决方案

推荐阅读