모바일에서 단일 배너 슬라이더 제거

debugcn 에 게시 Dev

앤드류 C. 두 아르테

브리핑:

클라이언트로부터 모바일보기 내에서만 회전하는 배너 슬라이더에서 단일 슬라이더를 제거해 달라는 요청이 있습니다. 태블릿, 노트북 및 데스크톱과 같은 다른 모든 화면 크기는 전체 배너 슬라이드 세트 (총 4 개)로 유지됩니다.

현재 작동 방식 :

배너에는 active배너 슬라이드를 표시하기 위해 JS에서 설정 한 클래스가 있으며 나머지 배너 슬라이드는 기본적으로 display: none;. active클래스는 대상에 추가됩니다 id다음 슬라이드를 대상으로하기 전에 10 초의 기간 동안.

문제 :

@media 쿼리는 JS가 무시하고 사용할 때 작동하므로 쿼리가 작동하지 않지만 !important이제 배너가 사용되는 곳에 빈 공백이 있습니다.

원하는 결과 :

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

앤드류 C. 두 아르테

이 질문에 답 해주신 모든 분들께 감사드립니다.

제 작업의 선임 개발자가 기존 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-17

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

모바일에서 단일 배너 슬라이더 제거

모바일에서 단일 배너 슬라이더 제거

바이너리 배포 파일에서 설치된 nodejs 제거

범위 슬라이더는 배열로 푸시하고, 중복 항목을 필터링하고, 범위가 0 일 때 배열에서 제거합니다.

데비안 배포판에서 단일 바이너리 유지

조건에 따라 2D 배열에서 단일 배열 제거

레이어 슬라이더에서 배너의 일부를 클릭 가능하게 만드는 방법

단일 제거 토너먼트 생성

배포시 컨테이너에서 파일을 제거하는 Azure App Service 배포 작업 옵션

jquery 모바일 슬라이더 양식에 스케일 추가

바이너리 파일에서 삭제

비트 조작 : 바이너리 "배열"에서 단일 문자 변경

모바일에서 대형화 된 Woocommerce 단일 제품 페이지

jQuery UI 슬라이더에 단계 추가 문제

배열 / 문자열에서 모든 소수 및 단일 숫자 제거

BootStrap에서 모바일 중단 점 제거

동일한 파일의 perl 한 라이너로 solaris에서 ^ M 제거

R에서만 텍스트에서 단일 슬래시 제거

Kubernetes 메모리 제한 : 동일한 포드에서 메모리 제한이 있거나없는 컨테이너

KnockoutJS는 JQuery 모바일에서 제거

모바일에서 개체 제거

자바 스크립트 배너 슬라이더 분석

Bash 스크립트 : Windows 파일 시스템에서 불법적 인 모든 문자를 제거 / 변경하기위한 배치 파일 이름 바꾸기

Bash 스크립트 : Windows 파일 시스템에서 불법적 인 모든 문자를 제거 / 변경하기위한 배치 파일 이름 바꾸기

Linux의 zip 아카이브에서 단일 파일 제거

파일 이름 시작 부분에서 단일 문자 제거

PHP의 배열에서 슬라이스 제거

슬라이더 배너에 링크 추가

배치 파일이있는 파일에서 xml 태그 제거

Unix의 파일에서 0 바이트를 모두 제거합니다.

Flutter-슬라이더에서 기본 여백 제거