멋쟁이 선생님들.. 제이쿼리 작성중인데 모르는 부분이 있어서 질문드립니다

Question

안녕하세요! 퍼블리셔로 취업하고 싶어 이것저것 만들어보고 있는 취준생입니다!다름이 아니라 현재 반응형 웹페이지를 만들고 있는데,피씨 - 1200px 이상태블릿 - 768px 이상모바일 - 767px 이하 로 잡고 모바일버전에서만 fade in - fade out되는 슬라이드를 만들고 있는 중입니다!그래서 이것저것 찾아본결과 .resize()를 이용하면 브라우저크기변화를 감지하여 다양하게 제이쿼리를 적용할 수있다고 해서윈도우 크기가 768 미만일때 fade in - fade out 되게 적용시켰는데피씨 -> 태블릿 -> 모바일 순으로 브라우저 크기를 줄였을때는 제가 원하는대로 작동이 되는데요!모바일 -> 태블릿 -> 피씨로 크기를 키우면 슬라이더가 멈춰야하는데 계속 작동되고 있습니다 ㅠㅠ!처음에 setInterval을 통해서 반복시켜놔서 그런가? 싶어서 태블릿, 피씨일때 clearInterval을 넣어봤는데 그대로고슬라이드 되는 함수 위치가 문제인가 싶어서 resize()밖으로 빼봤는데도 그대로네용..혹시 제가 놓친 부분이 있을까요? ㅠㅠ/* 제이쿼리 코드입니다 !*/ $(window).resize(function () { let widthSizing = $(window).width(); if (widthSizing >= 768) { clearInterval(bestInterval); } else if (widthSizing < 768) { /* 베스트메뉴 슬라이드-모바일버전 */ $(".best-menu-item").eq(0).siblings().hide(); //0번째 슬라이드 외의 슬라이드 숨김 let bestMenuIdx = 0; //현재 슬라이드의 인덱스 번호 let bestMenuCount = $(".best-menu-item").length; function fadeBestMenu() { /* 슬라이드 페이드인-페이드아웃 */ $(".best-menu-item").eq(bestMenuIdx).fadeIn(); $(".best-menu-item").eq(bestMenuIdx).siblings().fadeOut(); bestMenuIdx++; //슬라이드 인덱스+1 if (bestMenuIdx >= bestMenuCount) { bestMenuIdx = 0; //전체 슬라이드 갯수를 초과하면 인덱스 0으로 초기화 } } let bestInterval = setInterval(fadeBestMenu, 3000); } });

BEST MENU

가장 인기있는 메뉴를 즐겨보세요

아이스 아메리카노

아이스 카페라테

살구자두 히비스 에이드

라이트 초코 쉐이크

MORE

진심펀치 · Answer

let bestInterval &#61; setInterval(fadeBestMenu, 3000);bestInterval 함수를 모바일 일때 못 불러오는 것 같습니다! if (widthSizing >&#61; 768) { clearInterval(bestInterval); <<< 콘솔창 보시면 에러뜹니다. }테스트 방식은 codepen으로 하였습니다.

멋쟁이 선생님들.. 제이쿼리 작성중인데 모르는 부분이 있어서 질문드립니다

1개의 답변

기술 목록