jQuery slick-paging custom + option

<script>
$('.slick-slider').slick({
  arrows: false,
  dots: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive : [
	{
    	breakpoint : 1024,
        setting: { 
        	slideToShow : 2,
            slideToScroll : 2
        }
    },
    {
    	breakpoint : 480,
        setting: {
        	slideToShow : 1,
            slideToScroll : 1 
        }
    }
],
  customPaging : function(slider, index) { 
    var num = index + 1;
    var tit = ['타이틀1','타이틀2','타이틀3','타이틀4','타이틀5','타이틀6','타이틀7'];
    return '<span class="dot">'+ tit[index] +'</span>';
            }
});
</script>

arrow : //화살표 넘기기 여부 (default: false),
dots : //네비게이션버튼 (default: false),
slidesToShow : //한번에 보여줄 사진의 수,
slidesToScroll : //한번에 넘길 사진의 수,
autoplay : //자동시작 (default : false),
autoplaySpeed : //자동넘기기 시간 (1000 = 1초),

dotsClass : '' // 네비게이션 클래스 변경,
infinite : //무한반복 (default: false),
slidePerRow: 1 // 보여질 행의 수,
variableWidth : // 사진마다 width의 크기가 다른가? (default: false),
draggable : // 리스트 드래그 가능 여부 (default: true),
arrows : // 화살표(넘기기 버튼) 여부 (default: true),
pauseOnFocus : // 마우스 포커스 시 슬라이드 멈춤 (default: true),
pauseOnHover : // 마우스 호버시 슬라이드 멈춤 (default : true),
pauseOnDotsHover : // 네비게이션 버튼 호버시 슬라이드 멈춤 (default : false),
vertical : // 세로방향 여부 (default : false),
verticalSwiping : // 세로방향 스와이프 여부(default : false),
accessibility : // 접근성 여부 (default : true),
appendArrows : $('.arrows_box') // 좌우 화살표 변경 (선택자 혹은 $(element)),
prevArrow : $('.prev_arrow') // 좌(이전) 화살표만 변경 (선택자 혹은 $(element)),
nextArrow : $('.next_arrow') // 우(다음) 화살표만 변경 (선택자 혹은 $(element)),
initialSlide : // 처음 보여질 슬라이드 번호 (default : 0),
centerMode : // 중앙에 슬라이드가 보여지는 모드 (default : false),
centerPadding : '50px' // 중앙에 슬라이드가 보여지는 모드에서 padding값,
fade : // 모션 사용 여부 (default : false),
speed : // 모션 시간(얼마나 빠른속도로 넘어가는지),
waitForAnimate : // 애니메이션 중에는 동작을 제한함 (default : true),
responsive : // 반응형,
breakpoint : // 반응형 구간,
setting : // 반응형 구간에 따른 설정 변경