slick slider를 이용한 모바일 페이지 레이아웃

참고 : https://github.com/kenwheeler/slick

음.. 모바일 네이버 비슷하게 만들려고하니깐
일반적인 것으로 여러가지를 해 봤는데
size에 따른 height가 문제가 많아서 javascript로 날코딩했는데

slick slider라는것이 있어서 한번 써봤당...ㅋㅋ

Header부분

 

 

Body 부분

 

	
	

		
메인메뉴
		

			
메인메뉴1
			
메인메뉴2
			
메인메뉴3
			
메인메뉴4
		
	
		
	

	
	

		
		

			
			첫번째 페이지
			
		
		
		

			
			두번째 페이지
			
		

		

			
			세번째 페이지
			
		

		

			
			네번째 페이지
			
		
		
	

	

		발바닥입니다.
	

 

Script 부분

$(document).ready(function(){
	$('.slide-item').slick({
		speed: 300,				// 이동속도...
		touchMove : false,		// 손가락 터치시 이동 여부...
		swipe : true,			// swipe 여부...
		draggable : false,		// 마우스 드래그로 이동 가능 여부...
		arrows:false,			// 이전 / 이후 화살표 표시 처리...	
		adaptiveHeight : true		
	});
	
	$('.slide-item').on('afterChange', function(event, slick, currentSlide){
		$('[id^="nidx_"]').removeClass('on');
		$('#nidx_'+currentSlide).addClass('on');
	});

	var v_nidx = $('[id^="nidx_"]');
	v_nidx.click(function(event){
		var v_nidx_val = $(this).attr('id').replace('nidx_','');
		$.clickMenuSlider(v_nidx_val);			
		event.preventDefault();
	});

	$.clickMenuSlider = function(id){
		$(".slide-item").slick('slickGoTo', id);		
		$('[id^="nidx_"]').removeClass('on');
		$('#nidx_'+id).addClass('on');
	}
});