【おすすめスライダー】slickslider(スリックスライダー)を使って色々なスライダーを作ってみました。

サイトにスライダーを入れたいけど簡単に入れる方法とかないの?
色々カスタマイズ機能がついていると良い!

このような疑問に答えます!

本記事では導入簡単、カスタマイズも豊富のslickslider(スリックスライダー)の導入方法、コードペンでの様々な実装サンプルを紹介します。

まずは導入準備から!headにCDNを読み込もう

まずは導入準備として上記CDNをhead内に読み込ませましょう!
直接ソースをダウンロードしたい方は下記リンクよりお願いします!
https://kenwheeler.github.io/slick/
以下よりコードペンを用いて実装サンプルを紹介していきます。

コードペンJSタブに書いてあるソースがslickの実行関数です。
PCとスマホで実行処理を分けているので見せ方を変える場合に便利です。

実装サンプル①

See the Pen slickslider01 by Kohei (@kouk05) on CodePen.0

ページネーション、矢印付きのシンプルなスライダーです。

実装サンプル②

See the Pen slickslider02 by Kohei (@kouk05) on CodePen.0

前後のslide要素を少し見せるスライダーです。

実装サンプル③

See the Pen slickslider03 by Kohei (@kouk05) on CodePen.0

サムネイル付きスライダーです。

Ads

関連記事

JavaScript

【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう

2022.06.04
94
JavaScript プログラミング

jqueryを使って、パラメーターを追加・付与し、条件分岐する方法

2021.12.08
137
HTMLCSS JavaScript プログラミング

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

2021.01.02
700
JavaScript プログラミング

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

2022.01.16
450