본문 바로가기

JavaScript/jQuery

[jQuery]네비게이션 내부에 swiper 넣기

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();
		  }
	  });