Slickとは
jsのライブラリであるjQueryのプラグインです。
Slickを用いることで、カルーセルを簡単に作成することができます。
＊カルーセルとは、スライドショーとも呼ばれるもので、画像や文字がスライドして表示されるUIのことです。そもそもの単語の意味としては「回転台」らしいです。
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>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="slide-items">
<li><img src="images/program_img1.jpg" alt=""></li>
<li><img src="images/program_img2.jpg" alt=""></li>
<li><img src="images/program_img3.jpg" alt=""></li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
.slide-items{
width:100%;
text-align: center;
}
.slide-items img{
margin: 5% auto;
}
.slick-dots {
margin:5% auto;
display:flex;
justify-content: center;
list-style: none;
padding: 0; /*謎の設定が適用されていたのでこれで0指定*/
}
.slick-dots li {
margin:0 3%;
}
.slick-dots .slick-active button{
background:#333;/*ドットボタンの現在地表示の色*/
}
.slick-dots button {
color: transparent; /* テキスト透明化。これがないとボタンに数字が浮かんでしまう*/
outline: none;
width:20px;/*ドットボタンのサイズ*/
height:20px;/*ドットボタンのサイズ*/
border-radius:50%;
background:#ccc;/*ドットボタンの色*/
}
JS
$(".slide-items").slick({
dots: true,
});
これでok
この三つを組み合わせ、無事にカルーセルを作成することができた。
今回は中々うまくいかず、ちょっと苦労した...
注意点
jQueryを導入したプログラムを自作してみるのは初めてだったため、導入に苦戦した。
よく言われる注意点としては、HTMLにJSを読み込ませる順番である。
↓でおk
①jQuery → ②プラグイン → ③自作JSファイル
CDNでjQueryを用いる際は注意すべき点である。
私の場合はこれはできていたが、プラグイン、つまりSlick専用のCSSファイルをheadタグ内に書くことができておらず、謎の挙動をするカルーセルを作成してしまった。
導入のポイントとして特に説明されている感じがなく、私は見落としてしまった。こちらも注意すべきである。
気がかりポイント
私が参照した教材では、jQueryは古い技術になりつつあるため、素のJSを記述できるエンジニアの方が価値が高いとされていた。これはReactやVue.js、TypeScriptといったフロントエンドにおける新しい技術が活発化しているからで、そこに対応するためには基礎的なJSの理解が不可欠である、ということだと解釈したのですが、やはり実際のところそうなのでしょうかね。
参考サイト