개요

HTML에서 slick.js를 사용하여 축소판 그림으로 슬라이드 제작을 설정하는 것보다
탭을 클릭하여 내용을 전환하는 장치를 추가할 때의 노트입니다.
구체적으로 말하면 아래 그림의 상단 6개 단추를 눌렀을 때
다음 주 이미지와 나란히 축소판을 전환합니다.이것은 욕심이 끝이 없는 말이다.
탭마다 6가지 슬라이드가 준비되어 있습니다.

문제가 생기다

컴퓨터 브라우저에서는 별 문제가 없지만 아이폰, 안드로이드에서는 문제가 발생했다.
탭을 클릭하여 내용을 전환하면 처음 읽을 때 활성화된 탭을 제외하고는 메인 이미지가 표시되지 않습니다.
아마 슬릭일 거예요.js가 슬라이드의 메인 이미지를 표시할 때 CSS3의transition과display와 관련이 있다고 생각합니다.(스마트폰에서 읽을 때 표시되지 않는 주요 이미지 크기를 가져올 수 없음)

해결 방법

읽을 때 탭에 있는 내용이 트리거되는지 여부
라벨을 바꾸는 자바스크립트 기술에 공을 들였다.
막힌 곳, CSS의 visibility를 이용하여 존재만 확보
나는 판면 디자인에 방해가 되는 하이트를 없앴다.
이렇게 하면 높이와 투명도가 없어도 항상 페이지에 존재하는 라벨을 설정할 수 있다.
말로는 뜻을 알 수 없다.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>

다음은 패널2의 내용입니다.