slick slider 슬릭 슬라이더 여러개 사용하기(multiple), slick nav 두개 이상 사용할 경우

slick slider 슬라이더 기본을 중복으로 여러개 사용 할경우 클래스로 넣어주면 중복 적용이 되는데요. 

slick navigation 을 사용하는 경우엔 중복사용이 안됩니다. 

navigation에서 클릭 할 경우 겹치거든요

	 
	function sliderSet(slickfor,slicknav){
		slickfor.slick({
		  slidesToShow: 1,
		  slidesToScroll: 1,
		  arrows: false,
		  fade: true,
		  asNavFor:slicknav
		});
		slicknav.slick({
		  slidesToShow: 4,
		  slidesToScroll:1,
		  focusOnSelect: true,
		  dots: false,
		  arrows:true,
		  infinite:false,
		  asNavFor: slickfor
		});
	}

	$('.slide-box').each(function(i,el){ //.slide-box -> slick-slider 감싸고 있는 부모 클래스명
		i+=1;	
		var slickfor = $(el).find('.slider-for').addClass('for'+ i) //.slider-for -> slider-for로 사용할 클래스 넣어주기 , for -> 카운팅할 클래스명
		var slicknav = $(el).find('.slider-nav').addClass('nav'+ i) //.slider-nav -> slider-nav로 사용할 클래스 넣어주기 , nav -> 카운팅할 클래스명
		sliderSet(slickfor,slicknav);
	})
	

See the Pen slick for slick nav multiple by 이챙 (@chae-young) on CodePen.

slick slider를 감싸서 

각 슬라이더를 카운팅한뒤 slick을 적용해주는 방법입니다.

slick 사용하다보면 은근히 써먹을 일 있으니 유용하게 사용하시길 바랍니다 ㅎㅎ