slick sliderの画像が表示されない

前提・実現したいこと

slickを使用し、タブ切り替えプラグインと併用すると非表示になったのでいろいろ調べた結果表示されはしたが
なぜかスライダーにはなっていない、consoleにエラーと表示されているのでそれが原因かと思いますが
どう間違っているのかわからない次第です。

発生している問題・エラーメッセージ

wordpressにslickを読み込ませて画像スライダーを作成しましたが、タブ切り替えのプラグイン「tabs pro」と併用した結果width 0pxと表記され画像が非表示になります。slick画像下のdotをクリックすると表示されます。

調べて拾ってきたコード
slick.jsをモーダルなど、最初非表示のもので使うとき

該当のソースコード

HTML
1  <div id="tabs-3"><!--tabs pro プラグイン-->
2    <h3 id="tab_title1" class="rich_font"><span class="titlespan">相談内容</span></h3>
3<ul class="slider">
4 <li><a href="#"><img src="*****************************" /></a></li>
5 <li><a href="#"><img src="*****************************" /></a></li>
6 <li><a href="#"><img src="*****************************" /></a></li>
7 <li><a href="#"><img src="*****************************" /></a></li>
8 <li><a href="#"><img src="*****************************" /></a></li>
9 <li><a href="#"><img src="*****************************" /></a></li>
10 <li><a href="#"><img src="*****************************" /></a></li>
11</ul>
12    <p>2019.09.06
13
14  </div><!--プラグイン閉じる>

JavaScript
1$(function() {
2    $('.slider').slick({
3    slidesToShow: 3,
4    autoplay: false,
5    speed: 800,
6    dots: true,
7    arrows: true,
8    variableWidth: false,
9    centerMode: false,
10    centerPadding: '3px',
11　　responsive:[
12      {
13        breakpoint: 1024, //ブレークポイント1
14          settings: { 
15            slidesToShow: 3,
16            slidesToScroll: 3,
17          }
18      },
19      {
20        breakpoint: 600, //ブレークポイント2
21          settings: { 
22            slidesToShow: 2,
23            slidesToScroll: 2
24          }
25      },]
26    });
27});
28
29 	$(function() {
30  var slider = $(".slick").slick({
31	$("#tabs-3").on("click",function(event){		  
32	  slider.css('opacity',0);
33             slider.animate({'z-index':1},300,function(){
34                 slider.slick('setPosition');
35                 slider.animate({'opacity':1});
36             });
37         });
38　　　});
39　});

console
1	$("#tabs-3").on("click",function(event){
2　　　　　//上記部分がエラーが出ます。Uncaught SyntaxError: Unexpected string

試したこと・現状

googleで調べましたが同様のエラーがslick出ている人がいないようなので、未熟者なのだと思いつつも理解できずに
どうしようもない状況です。

アドバイスしてほしいこと

エラーの理由が知りたい

編集・追記

回答者の方のおかげで
おっしゃる通りにしてみるとコンソールエラーは確かに消えました。

私の考えでは、このエラーが消えれば画像が表示されると思っていたのですが画像が表示されず・・・
sliderをオートスクロールにすると表示されるようになりました。
表示されたら、表示されたで写真が表示されず、sliderオートスクロールを外すと画像は表示されません。

widthが取得されていないから表示されないはずなのですが、オートスクロールにせずに表示する方法はないのでしょうか？

行動規範の内容に同意します

回答1件

$(".slick").slick({})の中には、slickのオプションを書いてください。
Getting Started | slick - the last carousel you'll ever need

$("#tabs-3").on()はslickメソッドの外に書いてください。

投稿2019/10/05 08:58

Lhankor_Mhy

総合スコア36072

GIIIG

2019/10/05 10:47 編集

ご回答ありがとうございます。おっしゃる通りにしてみるとコンソールエラーは確かに消えました。ありがとうございます！私の考えでは、このエラーが消えれば画像が表示されると思っていたのですが画像が表示されず・・・ sliderをオートスクロールにすると表示されるようになりました。表示されたら、表示されたで表示される理由がわからず、 sliderオートスクロールを外すと画像は表示されません。 widthが取得されていないから表示されないと思ったのですが、オートスクロールにせずに表示する方法はないのでしょうか？