web制作

【 slick スライダー】超簡単なスライダー作成方法を紹介

「スライダーを実装したいけど、どれをプラグインすればいいの？」と悩んでいる方に向けて slick を用いた導入方法を解説します。

　

目次

  1. slickとは
  2. HTML
  3. CSS
  4. jQuery
  5. 完成
  6. まとめ

　

slickとは

slickとはスライダーを導入するための一つのプラグインです。簡単にいえばスライダー専用のbootstrapのようなです。

導入は簡単で公式サイトからslickフォルダをダウンロードし、HTML上で読み込みます。その後はslickフォルダ内のファイルを編集することによりオリジナルのスライダーが完成！ということになります。

フォルダダウンロードから商用利用まで無料でできるので、フリーランスの方などでよく利用されています。

今回は基本的なスライダ作成を用いてその便利さを知っていただこうと思います。

　

HTML 

<head>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">
    <meta charset="utf-8">
    <link rel="stylesheet" href="slick-1.8.1/slick/slick-theme.css" type="text/css">
    <link rel="stylesheet" href="slick-1.8.1/slick/slick.css">
  </head>
  <body>
    <div class="slide">
      <div>
        <img src="imag/image0.jpeg" alt="">
      </div>
      <div>
        <img src="imag/image1.jpeg" alt="">
      </div>
      <div>
        <img src="imag/image2.jpeg" alt="">
      </div>
      <div>
        <img src="imag/image3.jpeg" alt="">
      </div>
      <div>
        <img src="imag/image4.jpeg" alt="">
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="slick-1.8.1/slick/slick.js" type="text/javascript"></script>
    <script src="./index.js"></script>
  </body>

基本的にbodyタグ内は画像を読み込んでいるのみなので説明不要かと思いますが、次の二点には注意してください。

　

注意点

・jquery読み込んだ後にslilck.jsを読み込む

・slick-theme.cssとslick.cssと読み込む

　

この二点を守らないとうまくスライダーとして動作してくれません。（私もこれの解決にかなり時間を要しました、、、、）

この二点を注意して上記のように導入すればバッチリです！

　（もちろんファイルパスはご自身のものに合わせてくださいね）

　

CSS

.slide {
  width:100%;
  margin: 0 auto;
}

.slide img {
   width:100%;
   height: 400px;
}

CSSは画像の位置・サイズのみ変更しています。

プラグインを導入するとCSSの記述が少なくて嬉しいですね！

　

jQuery

$('.slide').slick({
  autoplay:true, //自動スクロール
  autoplaySpeed: 5000,//自動スクロール時間
  slidesToShow: 1,//スライド何枚表示するか。
  slidesToScroll: 1,//1回のスクロールで何枚のスライドさせるか。
  dots: true,//下部ドットナビゲーションの表示有無
});

今回、jQueryは自動スクロールなどを制御しています。

本来は、次へ・前へのボタンなど、もっと多くのことを制御できるのでぜひ調べてみてください。

(ちなみに今回は次へ・前へボタンは表示していません)

　

完成

slick_Slider

今回完成したものがこちら！

とてもシンプルですが基礎のスライダーだと思います。

ちなみにスライダーを編集する場合はslick-theme.cssファイルを確認してみてください。slick-theme.cssファイル内でドットの色などは編集できます。簡単なものはslick-theme.cssファイルで直接変更してあげましょう。

　

まとめ

今回はslickを用いたスライダの作成方法を紹介しました。

かなり簡単だったと思います。あと、個人的にはcssファイルやjQueryファイルがかなり簡潔でスッキリと記述できるのは非常に嬉しいです。色々な機能を足していくに従ってどうしても複雑になりで行数が増えてしまいますからね、、、。

slick はすごく便利ですのでこの機会に一度使ってみてください。

私もまだまだ修行中の身ですが一緒に頑張っていきましょう！

今後も私の勉強過程での気づきをどんどん発信していきますので興味があるものはチェックしてみてください。

　

この記事をシェアする：

-web制作
-,