slickスライドプラグインについて

メインビジュアルが10枚あり、サムネイルの数が3つの項目でサムネイルの部分のテキストをクリックすると、メイン画像の指定した場所にスライド移動する仕組みを作成したいのですが、機能しませんでした。
サムネイルの画像とメイン画像の枚数が同じでないとできないのでしょうか。
同じような仕組みでご存知の方、javascript得意な方見ていただけませんでしょうか？

html
1サムネイル画像
2<ul class="plan_list">
3 <li>test1</li> //画像1のビジュアルにスライドする
4 <li>test2</li> //画像5のビジュアルにスライドする
5 <li>test3</li>//画像8のビジュアルにスライドする
6</ul>
7
8メイン画像
9<ul class="selector">
10 <li>画像1</li>//test1をクリックしたときの移動先
11 <li>画像2</li>
12 <li>画像3</li>
13 <li>画像4</li>
14 <li>画像5</li>//test2をクリックしたときの移動先
15 <li>画像6</li>
16 <li>画像7</li>
17 <li>画像8</li>//test3をクリックしたときの移動先
18 <li>画像9</li>
19 <li>画像10</li>
20</ul>

js
1	
2
3	$(".selector").slick({
4		autoplay: true,
5		cssEase: 'ease',
6		slidesToShow: 3,
7		slidesToScroll: 1,
8		infinite: true,
9		draggable: true,
10		arrows:true,
11		focusonSelect:true,
12		asNavFor: '.plan_list', //サムネイルのクラス名
13		responsive: [
14		{
15				breakpoint: 768,
16				settings: {
17				slidesToShow: 1,
18				slidesToScroll: 1,
19				arrows:true,
20			}
21		}
22	    ]
23		
24		
25	});
26	     $('.plan_list').slick({
27          infinite: true,
28          slidesToShow: 3,
29          slidesToScroll: 3,
30          asNavFor: '.selector', //スライダー本体のクラス名
31          focusOnSelect: true,
32     });
33	/*