swiper 마크업은 생략
기존의 JS Code
var $header = $('#header'), $gnb = $('ul.gnb_ul'), $gnbLi = $gnb.find(' > li'), $gnb2Dep = $gnbLi.find('.depth_area') $gnbLi.on({ "mouseenter focusin" : function(){ $gnb2Dep.addClass("on"); $(this).addClass('on').find($gnb2Dep).show(); }, "mouseleave focusout" : function(){ $gnb2Dep.removeClass('on'); $(this).removeClass('on').find($gnb2Dep).hide(); } });
수정된 JS Code
var arrSwiper = []; $gnbLi.on({ "mouseenter focusin" : function(){ var $this = $(this); var $idx = $this.index(); var $swiper = $this.find(".best-swiper"); $gnb2Dep.addClass("on"); $this.addClass('on').find($gnb2Dep).show(); //bestSlide(); if(!(typeof arrSwiper[$idx] == "object")){ //alert("init"); $swiper.find(".swiper-button-prev").on("click",function(){ arrSwiper[$idx].slidePrev(); }); $swiper.find(".swiper-button-next").on("click",function(){ arrSwiper[$idx].slideNext(); }); arrSwiper[$idx] = new Swiper($swiper, { slidesPerView : 1, slidesPerGroup :1, //centeredSlides: true }); } }, "mouseleave focusout" : function(){ $gnb2Dep.removeClass('on'); $(this).removeClass('on').find($gnb2Dep).hide(); } });
'JavaScript > jQuery' 카테고리의 다른 글
[jQuery] attr("rel")을 사용한 여러개의 탭 만들기 (0) | 2018.04.12 |
---|---|
[jQuery] Swiper 여러개 사용하기 (0) | 2018.04.11 |
[jQuery] data값을 이용한 hover 메뉴 (0) | 2018.03.28 |
[jQuery] Depth gnb 네비게이션 (0) | 2018.03.14 |
[jQuery] 메모 포스팅.. (0) | 2018.03.14 |