删除移动设备上的单个横幅滑块

Question

简介：

我收到客户的请求，要求仅在移动视图中从旋转横幅滑块中删除单个滑块。所有其他屏幕尺寸，如平板电脑、笔记本电脑和台式机，将保留其完整的横幅幻灯片集（总共 4 张）。

目前如何运作：

横幅有一个 class active 由 JS 设置以显示横幅幻灯片，其余横幅幻灯片默认为 display: none;。 active class 添加到目标 id 持续 10 秒，然后再定位下一张幻灯片。

问题：

@media 查询将无法工作，因为 JS 将覆盖并且在使用 !important 时它可以工作，但是，现在有一个空白的白色 space 横幅曾经是。

期望的结果：

从总共 4 个横幅中，要求仅在移动设备上删除第一个横幅，以便它看起来只有 3 个横幅。旋转横幅 #2、#3 和 #4 并跳过横幅 #1。

参考站点：
请参阅此站点以获取完整的操作代码：
https://www.workpacgroup.com/

<div id="prefix_banner-container">
<div class="container-flud">
    <div class="row"> 

        <!-- STRAPSLIDE -->
        <div class="strapslide" id="strapslide"> 

            <!-- PROGRESS BAR -->
            <div class="row">
                <div class="col-md-12">
                    <div class="progress progress-striped">
                        <div class="progress-bar" style="width: 4.4%;"></div>
                    </div>
                </div>
            </div>
            <!-- /PROGRESS BAR --> 

            <!-- PRELOADER -->
            <div class="preloader text-center" style="display: none;"> <img src="//images.jxt.net.au/workpac-healthcare/images/loader.gif" alt="Loading.." id="loader"> </div>
            <!-- /PRELOADER --> 

            <!-- STRAPSLIDE CONTAINER -->
            <div class="strapslide-container" style="height: auto;"> 

                <!-- SLIDE #1-->
                <div class="slide" data-animation="fade" id="Slide1" > 
                    <!-- SLIDE CONTENT -->
                    <div class="slide-content container">
                        <div class="row" data-top="1%" id="SlideText1" style="position: absolute; top: 1%; margin-left: 0px; margin-top: 0px; transform: rotate(0deg) scale(2, 2); opacity: 0;">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
                                        <h2>Meet Our Nurse Tom <span>When not working with us,<br> he is building his dream home.</span></h2>
                                        <a class="click-here" href="/why-work-for-us" title="Learn More">Learn More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /SLIDE CONTENT --> 
                    <!-- BACKGROUND IMAGE --> 
                    <img src="//images.jxt.net.au/workpac-healthcare/images/banners/mainslider2.png" class="background-image background-fullwidth" alt=" "> 
                    <!-- /BACKGROUND IMAGE --> 
                </div>
                <!-- /SLIDE --> 

                <!-- SLIDE #2-->
                <div class="slide" data-animation="fade" id="Slide2" style=""> 
                    <!-- SLIDE CONTENT -->
                    <div class="slide-content container">
                        <div class="row" data-top="1%" id="SlideText2" >
                            <div class="container">
                                <div class="row">
                                     <div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
                                        <h2>Search our latest<br> job vacancies</h2>
                                        <a class="click-here" href="/advancedsearch.aspx?search=1" title="Click Here">Click Here</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /SLIDE CONTENT --> 
                    <!-- BACKGROUND IMAGE --> 
                    <img src="//images.jxt.net.au/workpac-healthcare/images/banners/mainslider1.png" class="background-image background-fullwidth" alt=" "> 
                    <!-- /BACKGROUND IMAGE --> 
                </div>
                <!-- /SLIDE --> 


                <!-- SLIDE #3-->
                <div class="slide" data-animation="fade" id="Slide3" > 
                    <!-- SLIDE CONTENT -->
                    <div class="slide-content container">
                        <div class="row" data-top="1%" id="SlideText3">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
                                        <h2>Does Our Team Know You?<span>If Yes, Chances Are So Do Australia's Leading Facilities.</span></h2>
                                        <a class="click-here" href="https://m.workpac.com/Registration/Home/Candidate#/" title="Register Now">Register Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /SLIDE CONTENT --> 
                    <!-- BACKGROUND IMAGE --> 
                    <img src="//images.jxt.net.au/workpac-healthcare/images/banners/main-slider5.png" class="background-image background-fullwidth" alt=" "> 
                    <!-- /BACKGROUND IMAGE --> 
                </div>
                <!-- /SLIDE --> 

                <!-- SLIDE #4-->
                <div class="slide" data-animation="fade" id="Slide4" > 
                    <!-- SLIDE CONTENT -->
                    <div class="slide-content container">
                        <div class="row" data-top="1%" id="SlideText4">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
                                        <h2>More The Just A Nursing Agency.<span>See our range of complementary services.</span></h2>
                                        <a class="click-here" href="/our-services" title="Click Here">Click Here</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /SLIDE CONTENT --> 
                    <!-- BACKGROUND IMAGE --> 
                    <img src="//images.jxt.net.au/workpac-healthcare/images/banners/main-slider4-1.jpg" class="background-image background-fullwidth" alt=" "> 
                    <!-- /BACKGROUND IMAGE --> 
                </div>
                <!-- /SLIDE -->  




                <div class="banner-nav">
                    <ul>
                        <li><a href="https://m.workpac.com/Registration/Home/Candidate#/" title="REGISTER" target="_blank"><i class="icon-1"></i>REGISTER</a></li>
                        <li><a href="/advancedsearch.aspx?search=1" title="FIND A JOB"><i class="icon-2"></i>FIND A JOB</a></li>
                        <li><a href="/why-work-for-us" title="WHY WORKPAC HEALTHCARE"><i class="fa fa-info-circle"></i>WHY WORKPAC HEALTHCARE</a></li>
                    <li><a href="/member/createjobalert.aspx" title="CREATE A JOB ALERT"><i class="fa fa-bell-o" aria-hidden="true"></i>CREATE A JOB ALERT</a></li>
                    </ul>
                </div>
                <!-- /STRAPSLIDE CONTAINER --> 

                <!-- PAGINATION -->
                <div class="row strapslide-pagination">
                    <div class="container">
                        <ul>
                        </ul>
                    </div>
                </div>
                <!-- /PAGINATION --> 

            </div>
            <!-- /STRAPSLIDE --> 

        </div>
    </div>
    <link rel="stylesheet" href="//images.jxt.net.au/workpac-healthcare/css/strapslide.css">
    <!-- JavaScript plugins --> 
    <script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.touchSwipe.min.js"></script> 
    <script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.transit.min.js"></script> 
    <!--<script src="//plugins.grozav.com/strapslide/strapslide/js/jquery.transit.min.js"></script>--> 
    <script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.mousewheel.js"></script> 
    <script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.fitVids.js"></script> 
    <!-- Slider plugin --> 
    <script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/strapslide.js"></script> 
    <!--<script src="//plugins.grozav.com/strapslide/strapslide/js/strapslide.js"></script> --> 
    <script>
        $(document).ready(function () {
            $('#strapslide').strapslide({
                animation: "fade, top",
                speed: 1000,
                timeout: 5000,
                responsive: 'resize',
                autoplay: true,
                preload: true,
                pauseOnHover: true,
                pagination: true,
                mousewheel: false,
                keyboard: true,
                touchscreen: true
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxenter('fade', 500);
                } 
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxexit('fade', 500);
                }
            });
        })
    </script> 
</div>

Answer 1

谢谢所有参与回答这个问题的人。

我工作的一位资深开发人员帮助我在现有的 JS 中添加了几行代码。所以如果有人可能也需要这个，我会回答我自己的问题。 if 语句紧跟在 $(document).ready(function ().

之后

if ( $(window).width() < 767 ){
   $('#strapslide #Slide1').remove();   
   }

这似乎成功了。

在完整的 JAVASCRIPT 代码中使用：

<script>
        $(document).ready(function () {
            if ( $(window).width() < 767 ){
                $('#strapslide #Slide1').remove();  
            }
            $('#strapslide').strapslide({
                animation: "fade, top",
                speed: 1000,
                timeout: 5000,
                responsive: 'resize',
                autoplay: true,
                preload: true,
                pauseOnHover: true,
                pagination: true,
                mousewheel: false,
                keyboard: true,
                touchscreen: true
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxenter('fade', 500);
                } 
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxexit('fade', 500);
                }
            });
        })
    </script>

删除移动设备上的单个横幅滑块

Remove single banner slider on mobile

javascript

jquery

banner

twitter-bootstrap