slick.jsを使ってタブ切り替え内にスライダーを設置したいです

実現したいこと

タブ切り替えでslick.jsを使用してスライダーを設置した時に
切り替えたタブないでもスライダーを動かしたい。

発生している問題

１枚目のタブ（開いてすぐ）ではスライダーは問題なく動きます。
が２個め以降のタブではスライダーが消えてしまいます。

エラーイメージ

●○○○○○○
──────┐
｜　タブ1 　｜
｜　スライド｜
｜　　OK 　｜
└─────┘　　　

↓

○●○○○○○
──────┐
｜タブ2以降｜
｜　スライド｜
｜　　✕ 　｜
└─────┘　　　

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5<meta http-equiv="content-script-type" content="text/javascript" />
6<meta name="viewport" content="width=768" />
7<meta name="viewport" content="width=device-width,initial-scale=1.0">
8<link rel="stylesheet" type="text/css" href="css/style.css">
9<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
10<link rel="stylesheet" href="js/slick.css">
11<link rel="stylesheet" href="js/slick-theme.css">
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
13<script><!-- タブ切り替え用script -->
14$(function(){
15    $('#contents div[id != "tab1"]').hide();
16     
17    // タブをクリックすると
18    $("a").click(function(){
19        // 一度全てのコンテンツを非表示にする
20        $("#contents div").hide();
21 
22        // 次に選択されたコンテンツを再表示する
23        $($(this).attr("href")).show();
24         
25        // 現在のcurrentクラスを削除
26        $(".current").removeClass("current");
27         
28        // 選択されたタブ（自分自身）にcurrentクラスを追加
29        $(this).addClass("current");
30
31        return false;
32    });
33 
34});
35</script>
36<script src="js/slick.min.js"></script>
37<title>||</title>
38<!--[if IE]>
39<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
40
41<![endif]-->
42
43</head>
44<body>
45<div id="wrapper">
46
47
48
49
50<div id="main">
51
52
53
54<div class="menu">
55 <ul class="menuimg">
56    <li style="margin-left: 2%;"><a href="#tab1" class="tab"><img src="image/nav-01.png"></a></li>
57    <li><a href="#tab2" class="tab"><img src="image/nav-02.png"></a></li>
58    <li><a href="#tab3" class="tab"><img src="image/nav-03.png"></a></li>
59    <li><a href="#tab4" class="tab"><img src="image/nav-04.png"></a></li>
60    <li><a href="#tab5" class="tab"><img src="image/nav-05.png"></a></li>
61    <li><a href="#tab6" class="tab"><img src="image/nav-06.png"></a></li>
62    <li><a href="#tab7" class="tab"><img src="image/nav-07.png"></a></li>
63  </ul><!-- menuimg -->
64
65 <div id="contents">
66    <div id="tab1"><!-- タブ内容 --!>
67	<p class="logo"><img src="image"></p>
68    <ul class="tabslide">
69	<li><img src="image"></li>
70	<li><img src="image"></li>
71	<li><img src="image"></li>
72	<li><img src="image"></li>
73	<li><img src="image"></li>
74	<li><img src="image"></li>
75	</ul>
76	</div><!-- tab1 -->
77
78    <div id="tab2">
79            <p class="logo"><img src="image"></p>
80      <ul class="tabslide">
81	<li><img src="image"></li>
82	<li><img src="image"></li>
83	<li><img src="image"></li>
84	<li><img src="image"></li>
85	<li><img src="image"></li>
86	<li><img src="image"></li>
87	</ul>
88    </div><!-- tab2 -->
89（.....tab3,tab4とつづきます）
90
91</body>
92
93<script>
94$(document).ready(function(){
95	var slider = $('.tabslide').slick({
96		autoplay:true,
97		dots:false,
98responsive: [
99    {
100      breakpoint: 1024,
101      settings: {
102        slidesToShow: 1,
103        slidesToScroll: 1,
104        infinite: true,
105        dots: false
106      }
107    },
108    {
109      breakpoint: 600,
110      settings: {
111        slidesToShow: 1,
112        slidesToScroll: 1,
113        dots:false
114
115      }
116    },
117    {
118      breakpoint: 480,
119      settings: {
120        slidesToShow: 1,
121        slidesToScroll: 1,
122        dots:false
123      }
124    }
125  ]	
126	});
127}); 
128</script>
129</body>
130</html>

試したこと

検索するとイベントのsetPositionを実行すれば解決するというのを見つけたのですが
いくら試してもうまく作動しません。
おそらく記述の仕方が問題あるのかなと思いましたが解決策が見いだせません。
何卒アドバイスいただけますようよろしくお願いいたします。
参考にしたページ
https://qiita.com/mimoe/items/c4f4754815525b08041e
http://dot1.tv/2017/01/slick-js-displaynone/

kei344

2018/02/07 13:36 編集

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

maccori

2018/02/08 01:45 編集

ありがとうございます、大変失礼致しました。

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

回答2件

ベストアンサー

.slick()を呼ぶと、slick.jsにより配下にdivやらなんやらが生成されます。
(だから、divではなくulで使うのもお勧めしません。)
そのため、次のコードは危険です。想定外のものまで消してしまいます。

JavaScript
1$("#contents div").hide();

次のように書けばいいかもしれません。

JavaScript
1$("#contents>div").hide();

投稿2018/02/08 08:36

x_x

総合スコア13749

maccori

2018/02/09 04:18 編集

ご回答ありがとうございます。こちらの記述で２枚目以降でも動きました！が、新たな問題が発生しましたが解決方法はありますでしょうか。 ●新たな問題２個目以降のタブで表示までに時間がかかります。すこし遅れて画像が表示されでスライダーが動くイメージです。甘えてしまいすいません、もし解決策がある場合はご教授いただければ幸いです。追記1： https://qiita.com/mimoe/items/c4f4754815525b08041e こちらの症状が近いのですが方法試しても解決されませんでした。。。追記2： autoplayspeedを設定すると出て来る時間が短縮されますがそれでもやはりワンテンポ待って表示されます。タブ1：最初からでている ↓移動タブ2：すこし遅れて表示

x_x

2018/02/09 07:46

再表示時のsetPositionで改善するようです。どうでしょうか？ $($(this).attr("href")).show().find('.tabslide').slick('setPosition');

maccori

2018/02/09 08:11

度々ありがとうございます。素人ですいません、以下のように変更しましたが動作変わらずでうまく行きません…。見当違いの記述となっておりますでしょうか？ <script> $(document).ready(function(){ var slider = $('.tabslide').slick({ autoplay:true, autoplaySpeed:4000, dots:false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, dots: false } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, dots:false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, dots:false } } ] }); $($(this).attr("href")).show().find('.tabslide').slick('setPosition'); }); </script>

x_x

2018/02/09 08:22

ええと、再表示というコメントのある行しか変えてませんよ？

maccori

2018/02/09 08:31

ずっと勘違いしてました！今、頂いたとおり再表示のコメントの部分を変えたらうまくいきました！有難うございます、大変助かりました。とても勉強になりました、本当にありがとうございました！

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