4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2024년 1월 8일 20:35 #109425
남지윤참가자안녕하세요 강사님 따로 홈페이지를 만들다보니 화면 해상도에 따라 스와이퍼 슬라이드를 적용할려고 코드를 짜는중에 코드상 뭐가 문제인지 감이 잡히지 않아 질문드립니다ㅠ <HTML>
<section class="container history_section"> <div class="history_section_inner"> <div class="history_text"> <h1>History</h1> <p>내용</p> </div> <div class="swiper history_swiper"> <div class="swiper-wrapper history_info"> <div class="swiper-slide history"> <picture> <source media="(max-width:800px)" srcset="./images/img_his1_mobile.png" > < img src="./images/img_his1.png" alt="첫번째이미지슬라이드"> </picture> <h3>2020</br>~2009</h3> </div> <div class="swiper-slide history"> <picture> <source media="(max-width:800px)" srcset="./images/img_his2_mobile.png" > < img src="./images/img_his2.png" alt="두번째이미지슬라이드"> </picture> <h3>2009</br>~2001</h3> </div> <div class="swiper-slide history"> <picture> <source media="(max-width:800px)" srcset="./images/img_his2_mobile.png" > < img src="./images/img_his2.png" alt="세번째이미지슬라이드"> </picture> <h3>2009</br>~2001</h3> </div> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </section> <script> var ww = $(window).width(); var mySwiper = undefined;function initSwiper() {if (ww < 800 && mySwiper == undefined) { mySwiper = new Swiper(".swiper", { slidesPerView: 1, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); } else if (ww >= 800 && mySwiper != undefined) { mySwiper.destroy(); mySwiper = undefined; } }initSwiper();
$(window).on('resize', function() { ww = $(window).width(); initSwiper(); }) </script> 간단하게 화면 크기가 800이하일때만 스와이퍼를 호출하고 800이상의 크기일때는 swiper를 파괴하도록 작성했습니다. 근데 문제는 계속 800이상일때에도 스와이퍼가 먹혀서 레이아웃이 기존 3개인데 계속 1개로 보여지더라구요.. 구글링으로 찾아보고 이렇게 저렇게 코드 바꾼거긴 한데 이론상은 맞는거 같은데 왜 먹히지를 않는지 이해가 안갑니다 ㅜㅜ 화면의 크기가 800이하일때 console창에 typeof(mySwiper)를 쳤을때 object 가 나오고, 800 이상일때 보면 undefined가 나와서 저렇게 코드를 적었습니다.. html코드에 해당 슬라이드를 적용시킬 클래스 앞에 swiper를 적용시키는건 맞는거같은데 스크립트로 제어를 하려하니 뭐가 문제인지 ㅠㅠ 참고> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> </head> 소스적용은 이걸로 했는데 혹시나 버전이나 소스가 달라서 안먹히는건지 혹시 몰라 적습니다 ...2024년 1월 9일 09:35 #109487
codingapple키 마스터mySwiper가 undefined가 아니면 mySwiper.destroy(); 하라고 if 추가해봅시다
2024년 1월 9일 09:52 #109492
남지윤참가자function initSwiper() {if (ww < 800 && mySwiper == undefined) { mySwiper = new Swiper(".swiper", { slidesPerView: 1, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); } else if ( ww >= 800 && mySwiper != undefined ) { mySwiper.destroy(); mySwiper = undefined; } else if ( mySwiper != undefined ) { mySwiper.destroy(); } } 기존else if ( ww >= 800 && mySwiper != undefined ) 이렇게 적었느데 안먹어서.. else if 문으로 다시 작성해봤는데 스와이퍼 파괴가 안되네요ㅜㅜ..2024년 1월 14일 20:14 #110158
codingapple키 마스터else if ( ww >= 800 ) { if (mySwiper != undefined) { mySwiper.destroy(); } else if 안에다가 써봅시다 -
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.