[jQuery 初心者]slick slider を使ってみよう

slider jQuery

今回はjQueryのプラグイン『slick』 を使ってsliderを作る方法を解説します。

プラグインをダウンロード

slickの公式サイトに飛んでダウンロードをしましょう。

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

上のリンクをクリックしたらまず下の写真に飛ぶと思います。

赤丸の get it now をクリックしてください。

次に下のページに飛ぶのでDownload Nowを押してslickのダウンロードを開始しましょう!

ファイル整理

ダウンロードが完了したらzipファイルを解凍してファイルの整理をしましょう。

これを解凍すると

こうなり

開くと

こん感じでたくさんデータがあるので『slick』ファイルを開きましょう。

開いたら下の画面になるので以下のようにデータを振り分けてください。

この中で実際に使うのは

  • ajax-loader.gif
  • fonts
  • slick-theme.css
  • slick.css
  • slick.min.js

なので、これらをcss,jsファイルに振り分けていきます。

CSSファイル

❇︎ass.cssは自分で作成

javascript

❇︎main.jsは自分で作成

ファイル準備

事前に、以下のようなHTMLファイルを用意しておきましょう。

HTML




コード書く

では実際にコードを描いていきます。

css

jQuery

cssでスライダーの大きさを決めてjQueryで実際にスライダーを動かします。

完成

こんな感じで下に黒のドットを置くことで写真の現在地が分かります。

また、右の矢印で写真のスライドが可能です。

最低限はこのあたりでいいと思います。

今回はこんな感じで終わりにしようと思います。最後まで読んでいただきありがとうございました!!