前提・実現したいこと
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が取得されていないから表示されないはずなのですが、オートスクロールにせずに表示する方法はないのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/05 10:47 編集
2019/10/07 02:24