勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画像等)を設置した場合、通常だと全てのスライダー画像の下部に当該コンテンツが表示される筈。これをスライダーの中央画像の下部にのみ表示し、左右の画像の下部は非表示としたいというケースがあった。以下に対応方法をメモ。

 

サンプル

https://taitan916.info/sample/slick/center_contents/

 

対応方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
#slider{
.slick-arrow{
z-index: 2;
top: 100px;
}
.slick-prev{
left: 1%;
}
.slick-next{
right: 1%;
}
.contents{
width: 100%;
background-color: #ccc;
height: 100px;
display: none;
}
.slick-current .contents{
display: block;
}
}
</style>
<main>
<section>
<div id="slider">
<div>
<div class="img">
<img src="../img/001.jpg">
</div>
<div class="contents">
コンテンツ1
</div>
</div>
<div>
<div class="img">
<img src="../img/002.jpg">
</div>
<div class="contents">
コンテンツ2
</div>
</div>
<div>
<div class="img">
<img src="../img/003.jpg">
</div>
<div class="contents">
コンテンツ3
</div>
</div>
<div>
<div class="img">
<img src="../img/004.jpg">
</div>
<div class="contents">
コンテンツ4
</div>
</div>
<div>
<div class="img">
<img src="../img/005.jpg">
</div>
<div class="contents">
コンテンツ5
</div>
</div>
</div>
</section>
</main>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script>
$(function(){
$(`#slider`).slick({
autoplay: true,
dots: false,
infinite: true,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
<style> #slider{ .slick-arrow{ z-index: 2; top: 100px; } .slick-prev{ left: 1%; } .slick-next{ right: 1%; } .contents{ width: 100%; background-color: #ccc; height: 100px; display: none; } .slick-current .contents{ display: block; } } </style> <main> <section> <div id="slider"> <div> <div class="img"> <img src="../img/001.jpg"> </div> <div class="contents"> コンテンツ1 </div> </div> <div> <div class="img"> <img src="../img/002.jpg"> </div> <div class="contents"> コンテンツ2 </div> </div> <div> <div class="img"> <img src="../img/003.jpg"> </div> <div class="contents"> コンテンツ3 </div> </div> <div> <div class="img"> <img src="../img/004.jpg"> </div> <div class="contents"> コンテンツ4 </div> </div> <div> <div class="img"> <img src="../img/005.jpg"> </div> <div class="contents"> コンテンツ5 </div> </div> </div> </section> </main> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <script> $(function(){ $(`#slider`).slick({ autoplay: true, dots: false, infinite: true, slidesToShow: 1, centerMode: true, variableWidth: true }); }); </script>
<style>
#slider{
    .slick-arrow{
        z-index: 2;
        top: 100px;
    }
    .slick-prev{
        left: 1%;
    }
    .slick-next{
        right: 1%;
    }
    .contents{
        width: 100%;
        background-color: #ccc;
        height: 100px;
        display: none;
    }
    .slick-current .contents{
        display: block;
    }
}
</style>

<main>
    <section>
        <div id="slider">
            <div>
                <div class="img">
                    <img src="../img/001.jpg">
                </div>
                <div class="contents">
                    コンテンツ1
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/002.jpg">
                </div>
                <div class="contents">
                    コンテンツ2
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/003.jpg">
                </div>
                <div class="contents">
                    コンテンツ3
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/004.jpg">
                </div>
                <div class="contents">
                    コンテンツ4
                </div>
            </div>
            <div>
                <div class="img">
                    <img src="../img/005.jpg">
                </div>
                <div class="contents">
                    コンテンツ5
                </div>
            </div>
        </div>
    </section>
</main>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script>
$(function(){
    $(`#slider`).slick({
        autoplay: true,
        dots: false,
        infinite: true,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

解説等

「.contents」部分をデフォルトでは非表示とし、中央に来た際に「.slick-current」が付与されるのでそのタイミングで表示させている。

 

所感

画像の切れ目(サンプルページだと画像1⇔5)の切り替えの際、微妙にコンテンツ部分の表示が遅れる点が少々気になるところ。フェード的なエフェクトを入れて誤魔化等、CSS側で更に調整が必要かも。

 - jQuery JavaScript CSS

  関連記事

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

S