WPの個別ページで、slickを使用してサムネイルは固定で、メイン画像だけスライダーの画像表示をしたい

前提・実現したいこと

WPの個別ページで使用するサムネイル付きスライダーを作成したいのですが、

イメージとしては下記のURLのように、サムネイルは固定にして、メイン画像だけスライダーにしたいです。
（ちなみにスライドする際の矢印もメイン画像に）
http://daikin-car.co.jp/serch/%E3%83%8F%E3%82%B9%E3%83%A9%E3%83%BC%EF%BC%96%EF%BC%96%EF%BC%90%E3%80%80%EF%BD%87%E3%80%80%E3%83%AC%E3%83%BC%E3%83%80%E3%83%BC%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AD%EF%BD%93-3/

サムネイルは縦2行の横6列で作成し、サムネイルをクリックするとメイン画像も反映されるようにしたいのですが、
色々試した結果うまくいかなかったため、皆様のお知恵をお貸しください。

該当のソースコード

PHP
1
2<?php if (have_posts()) : ?>
3                	<?php while (have_posts()) : the_post(); ?>
4					<div class="slider">
5						<ul class="thumb-item">
6							<?php $field_names = array('example_img1','example_img2', 'example_img3', 'example_img4', 'example_img5', 'example_img6', 'example_img7', 'example_img8','example_img9','example_img10','example_img11'); ?>
7                                    <?php foreach($field_names as $field_name): ?>
8                                        <?php $field = get_field_object($field_name) ?>
9                                        <?php if($field['value']): ?>
10											<li><img src="<?php echo $field['value']; ?>" alt="<?php echo $field['label']; ?>"></a></li>
11                                        <?php endif; ?>
12                                    <?php endforeach; ?>						
13						</ul>
14					</div>
15					
16					<div class="content">
17					<h4><?php the_title(); ?></h4>
18					<ul>
19						<li><span>所在地</span><?php the_field("example_address") ?></li>
20					</ul>
21						 <?php the_content(); ?>
22					</div>
23					
24					<div class="content2">
25						<ul class="thumb-item-nav">
26							<?php $field_names = array('example_img1','example_img2', 'example_img3', 'example_img4', 'example_img5', 'example_img6',
27													  'example_img7', 'example_img8','example_img9','example_img10','example_img11'); ?>
28                                    <?php foreach($field_names as $field_name): ?>
29                                        <?php $field = get_field_object($field_name) ?>
30                                        <?php if($field['value']): ?>
31											<li><img src="<?php echo $field['value']; ?>" alt="<?php echo $field['label']; ?>"></a></li>
32                                        <?php endif; ?>
33                                    <?php endforeach; ?>	
34						</ul>
35					</div>
36		
37
38		
39					<?php endwhile; ?>
40            		<?php endif; ?>

SCSS
1.slider { width:50%; float:left; height:400px; overflow: hidden;
2			ul {
3				li{ 
4					img {	width: 520px;
5							height: 350px;
6							object-fit: scale-down;	}
7				}
8			}
9			.slick-slide img　{width:100%; }
10			.slick-next:before, .slick-prev:before{ color:#999; font-size:40px;}
11			.slick-next, .slick-prev {width:130px; z-index:100;}
12		}
13		
14		.content { width:48%; float:left; padding:10px;
15		h4 { font-size:17px; font-weight:bold; border:solid #e5e5e5; border-width:0 0 1px; padding:0 0 8px 0;
16			 margin:0 0 10px; position:relative; line-height:1.2;
17		}
18		ul li span { display:inline-block; padding:1px 10px 0 10px; background:#2b9124; color:#fff; font-size:13px; margin:0 10px 5px 0; }
19		p { font-size:13px; margin:10px 0;
20					&:last-child { margin:0; }
21				}
22		}
23		
24		.content2 { width:100%; float:left; 
25			ul { 
26				li{ 
27					img {	
28						width: 160px;
29						height: 100px;
30						object-fit: scale-down;	}
31				}
32			}
33			
34		}

javascript
1
2<script type="text/javascript">
3$(function() {
4     $('.thumb-item').slick({
5          asNavFor: '.thumb-item-nav'
6     });
7     $('.thumb-item-nav').slick({
8		  infinite: true,
9		  rows:2,
10          　　　　slidesPerRow: 6,
11          　　　　asNavFor: '.thumb-item', 
12          　　　　arrows: false,//スライダー本体のクラス名
13          　　　　focusOnSelect: true
14     });
15
16});
17
18</script>
19