勉強したことのメモ

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

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

   2024/10/01  jQuery JavaScript

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコード及びサンプルページをメモ。

 

slick

公式サイト

https://kenwheeler.github.io/slick/

CDN

CDNで使う場合は以下を記述する。

<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">

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/slick-carousel

 

サンプル

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

 

ソースコード

<style>
#slider{
    .slick-arrow{
        z-index: 2;
        top: 100px;
    }
    .slick-prev{
        left: 1%;
    }
    .slick-next{
        right: 1%;
    }
}
</style>

<main>
    <section>
        <div id="slider">
            <div><img src="./img/001.jpg"></div>
            <div><img src="./img/002.jpg"></div>
            <div><img src="./img/003.jpg"></div>
            <div><img src="./img/004.jpg"></div>
            <div><img src="./img/005.jpg"></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.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script>
$(function(){
    $(`#slider`).slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

 

オプションについて

各種オプション設定については公式のこちらのページを参照すること。

 - jQuery JavaScript

  関連記事

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

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

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

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

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