勉強したことのメモ

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.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...