Webサイトでよく見る「画像が横にスライドする実装」のことをスライダーといいます。

ここではスライダーの実装方法を習得しましょう！

スライダーを実装する時はslick sliderを使って実装することが多いです。

1. slickとは

slickとは、jQueryを使って簡単にスライダーを作れるJavaScriptライブラリです。

slickを使うには準備が必要です。

2. slickを使う準備

slickを使うには、以下の3つのファイルを読み込む必要があります。

• jQuery

• slickのCSS

• slickのJavaScript

今回はCDNという方法で表示させます。

①headタグの<link rel=”stylesheet” href=”css/style.css”>の上の行に下記を記述します。

<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css”/> <link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css”>

②jQueryの読み込みの後にslickのcdnを読み込む。

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js”></script>

これで準備は完了です。

これが書けたら、スライダーにしたい箇所を要素で囲います。

実際のファイルは演習ファイルを見てみましょう！