1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

slickの使い方(スライダー)

Last updated at Posted at 2022-07-04

初心者による初心者のためのslick講座

slickとは

レスポンシブ対応しているスライダー用のjQueryプラグイン。
タッチイベント・スワイプなどにも対応しているjQueryの定番プラグインです。
スライダー.gif
上のように画像を切り替えておしゃれな雰囲気を出したかっ他ので勉強。
読み込み方がややこしくて、ドキュメントも英語のため初心者用に解説します。

slickの使い方

slickの読み込み

使う方法は、必要なファイルをDLして読み込むか、CDNを使って読み込む必要があります。
今回は、CDNを使って読み込む方法を解説します。

1.まず、slickのサイトに飛びます。
https://kenwheeler.github.io/slick/

以下の画面に遷移します。
スクリーンショット 2022-07-04 20.56.04.png
①で、利用方法を見ることができます。
②で、CDNの読み込みをするcodeを取得できます。

②をクリックします。
スクリーンショット 2022-07-04 21.13.28.png
上記の、赤の箇所がCDNcodeです。

2.CDNcodeの読み込み

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slickの練習</title>

    <!-- slickからコピーしたCDNcode linkタグ -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

    <!-- ページのスタイル -->
    <link rel="stylesheet" href="style.css">

    <!-- jQueryの読み込み -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <!-- slickからコピーしたCDNcode scriptタグ -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <!-- jsファイルの読み込み -->
    <script src="./index.js"></script>

</head>
<body>

    <!-- 練習用スライダー -->
    <div class="slider">
        <div class="slider_item item1">1</div>
        <div class="slider_item item2">2</div>
        <div class="slider_item item3">3</div>
    </div>
    
</body>
</html>

jQueryも読み込む必要があります。

また、読み込む順番にも気をつけましょう。
スライダーの練習用のdivタグを装飾するCSSは以下の通りです。

style.css
@charset 'utf-8';
*{
    padding: 0px;
    margin: 0px;
}
.slider_item {
    font-size: 150px;
    line-height: 500px;
    text-align: center;
    font-weight: 100%;
    color:rgb(94, 94, 94);
}

.item1{
    background-color: aqua;
}
.item2{
    background-color: yellow;
}
.item3{
    background-color: rosybrown;
}

slickの使用

3.slickを使ってみる!!
読み込んでいたJSファイルに記述します。

index.js
$(function(){
    $('.slider').slick();
    //$(クラス名).slick();で使用できます。
})

上記の記述をすることでスライダーができています。
この状態では以下のように手動でしか動きません。
スクリーンショット 2022-07-04 22.16.39.png

4.slickオプションを指定!!
オプションは以下のように指定できます。

index.js
$(function(){
    $('.slider').slick({オプション名});
})

実際に以下のコードにしてみましょう。

index.js
$(function(){
    $('.slider').slick({
        autoplay:true,
        autoplaySpeed:2000,
        fade:true,
        arrows: false,
    });
})

今回使ったオプション

オプション名    デフォルト    使用
autoplay false スライドの自動再生。
※値を『true』にすることで自動再生します。     
autoplaySpeed 3000 自動再生時のスライドの表示時間の設定。
※1秒:1000
fade false フェードイン・フェードアウトに切り替える。
※trueにすることでonになる。
arrows true ナビゲーション用ボタン

上なような記述で以下のようなスライドができます。

test1.gif

※デザインについてはセンスがないんですがよく見ますよね?

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?