slick.jsのスライダー機能をタブ切り替え内で使用する際の落とし穴

概要

HTML上にslick.jsを使用してスライドをサムネイル付で配置している作りに対し、
タブクリックで内容を切り替える仕掛けを追加することになった際のメモ。
具体的には下記の画像の上部6つのボタンをクリックすると、
その下のメイン画像および横並びのサムネイルが切り替わるというものだ。欲張りな話である。
この際、スライドはタブ毎に6種類用意している。

問題発生

PCブラウザでは特に問題なく動いていたのだが、iphone、Androidで問題が起きた。
タブをクリックして内容を切り替えると、初回読み込み時にアクティブになっていたタブ以外では、メイン画像が表示されないのだ。

おそらくslick.jsがスライドのメイン画像を表示する際にCSS3のtransitionやdisplayが関係していると思われる。（読み込み時に表示されていない内容のメイン画像寸法をスマートフォン上では取得できていない）

解決策

読み込み時にタブ内の内容が存在しているかどうかがトリガーとなっているので、
タブ切り替えのjavascript記述を工夫してみた。

詰まるところ、CSSのvisibilityを利用して存在だけ確保し、
レイアウト上邪魔になるheightを取り除いてやったのだ。
これで高さをもたず透明でありながら、ページ上に常に存在しているタブが配置できる。
言葉にしてみるとぶっちゃけ意味がわからない。slick用の記述は省略する。

Javascript

    $(window).load(function () {
        $(function() {
            $('.hoge ul li a[href^="#panel"]').on('click',function(){
                //すべてのli要素の class="active" を取り除いて
                $(".hoge ul li").removeClass("active");
                //クリックされたa要素の親要素になるliだけにactive付与(ボタンCSS変更)
                $(this).parent().addClass("active");

                $(".panel").css("visibility", "hidden");
                $(".panel").css("height", "0px");
                $(this.hash).css("visibility", "visible");
                $(this.hash).css("height", "auto");
                return false;
            });

            $('.hoge ul li a[href^="#panel"]:eq(0)').trigger('click');
        })

    });

HTML

<ul class="hoge">
    <li><a href="#panel1">1</a></li>
    <li><a href="#panel2">2</a></li>
    <li><a href="#panel3">3</a></li>
    <li><a href="#panel4">4</a></li>
    <li><a href="#panel5">5</a></li>
    <li><a href="#panel6">6</a></li>
</ul>

<div id="panel1" class="panel">
    <div class="gal">
        <div class="btn prev"><a href=""><img src="prev.png" alt="prev"></a></div>
        <div class="btn next"><a href=""><img src="next.png" alt="next"></a></div>
        <ul class="slick-slider">
            <li><img src="hoge1_big.jpg"></li>
            <li><img src="hoge2_big.jpg"></li>
            <li><img src="hoge3_big.jpg"></li>
            <li><img src="hoge4_big.jpg"></li>
            <li><img src="hoge5_big.jpg"></li>
　　　　</ul>
    </div>  
    <ul class="thumb">
        <li><a href="1"><img src="hoge1.jpg"></a></li>
        <li><a href="2"><img src="hoge2.jpg"></a></li>
        <li><a href="3"><img src="hoge3.jpg"></a></li>
        <li><a href="4"><img src="hoge4.jpg"></a></li>
        <li><a href="5"><img src="hoge5.jpg"></a></li>
    </ul>
</div>

これ以降はpanel2の内容が続く。