タブ内のslick sliderの動作について

タブのコンテンツ内に入れているslick sliderが動作してくれません。

以下がコードになりますが、対処方法わからず困っています。
解決策わかる方いらっしゃいますでしょうか？

{{ include('Block/amajewelry/necklace.twig', ignore_missing = true) }}
となっているのが、スライダーを記述しているファイルです。
スライダーのjsはコチラになります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$(function(){
var mainSlider = "#slider10";
var thumbnailSlider = "#thumbnail_slider10";
$(mainSlider).slick({
arrows: false,
asNavFor: thumbnailSlider,
});
$(thumbnailSlider).slick({
slidesToShow: 2,
asNavFor: mainSlider,
slidesToScroll: 1,
arrows: false,
centerMode: true,
speed: 1000,
focusOnSelect: true,
centerMode: true,
}); $(thumbnailSlider+" .slick-slide").on('click',function(){
var index = $(this).attr("data-slick-index");
$(thumbnailSlider).slick("slickGoTo",index,false);
});
});
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

以下、タブのHTMLコード

<!-- ＊＊＊＊＊＊NECLACE商品リスト＊＊＊＊＊＊ -->

{{ include('Block/amajewelry/necklace.twig', ignore_missing = true) }}

</div>

<!-- ＊＊＊＊＊＊RING商品リスト＊＊＊＊＊＊ -->
<div class='content2'>

{{ include('Block/amajewelry/ring.twig', ignore_missing = true) }}

</div>
<!-- ＊＊＊＊＊＊ピアス商品リスト＊＊＊＊＊＊ -->


<div class='content3'>


</div>

<!-- ＊＊＊＊＊＊その他商品リスト＊＊＊＊＊＊ -->


<div class='content4'>


</div>

</div> </div> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); body{ padding:0; margin:0; background:#fff; } .tabs{ width:100%; margin:0px auto; position:relative; } .tab-buttons span{ font:400 12px 'open sans',sans-serif; color:#333; cursor:pointer; display:block; width:25%; float:left; text-align:center; height:40px; line-height:40px; background-color: #eee; border: solid 1px #fff; } .tab-content{ padding:15px; display:inline-block; font:400 16px 'open sans',sans-serif; color:#333; width:100%; } #lamp{ text-align:center; width:25%; height:2px; background:#333; display:block; position:absolute; top:40px; transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; } #lamp.content1{ left:0; transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; } #lamp.content2{ left:25%; transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; } #lamp.content3{ left:50%; transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; } #lamp.content4{ left:75%; transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; } p{ margin-top:3px; margin-bottom:2px; font-size:16px; } .model_area{ overflow:hidden; } </style>