删除移动广告

Question

简介：

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

目前的工作方式：

该横幅具有由JS设置的类active以显示横幅SLIDE，其余横幅幻灯片默认为display: none;。在定位下一张幻灯片之前，active类会被添加到目标id，持续时间为10秒。

问题：

@media查询将无法正常工作，因为JS会覆盖它，并且在使用!important时它会起作用，但是，现在有一个空白的空格，其中有一个横幅用来。

期望的结果：

从总共4个横幅中，要求仅在移动设备上移除第1个横幅，使其仅显示为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>