Edited at

カルーセルを使って複数画像をスライドさせる方法

友人たちと開発している、時間の使い方を管理するサービス「 Owntime 」で使用したカルーセルの使い方をまとめました。

カルーセルを使うことで、ユーザーの目につきやすい箇所に複数の画像を表示することが出来ます。

今回は、jQueryのSlickを使用しました。Vue.jsやReact.js、Angularの方が、モダンであることは、承知していますが、手っ取り早く実装したかったので、オワコンと言われているjQueryを使いました。

(jQueryで書かれているコードたちをモダンなJavaScriptに 書き換えてくれる or 勉強のために書き換えてみたい って人は、連絡ください!!)

出来上がりイメージ↓


対象読者


  • プログラミング初学者の方

  • 普段はバックエンドを触っているがフロントを触る必要がある方

  • オワコンと言われているjQueryからまだまだ離れられない方


簡単に実装してみる

まずは、jqueryとslickの準備をします。


sample.html

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick-theme.min.css">

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js"></script>
</head>


カルーセルを実装します。


sample.html

<body>

<style>
.signup-slider {
padding-inline-start: 0px;
margin: 25px
}
</style>

<div>
<ul class="slider signup-slider">
<li>
<img src="path/to/image1.png" width="100%" alt="画像1">
</li>
<li>
<img src="path/to/image2.png" width="100%" alt="画像2">
</li>
<li>
<img src="path/to/image3.png" width="100%" alt="画像3">
</li>
<li>
<img src="path/to/image4.png" width="100%" alt="画像4">
</li>
<li>
<img src="path/to/image5.png" width="100%" alt="画像5">
</li>
<li>
<img src="path/to/image6.png" width="100%" alt="画像6">
</li>
</ul>
</div>

<script>
$('.slider').slick({
dots: true,
centerMode: true,
centerPadding: '5px',
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 1000,
responsive: [
{
breakpoint: 320,
settings: {
arrows: false,
centerMode: true,
}
}
]
});
</script>
</body>


他のオプションについては、Slickの公式ページを参考にしてください。


おまけ

今回紹介したslickを、友人とOwntimeに実装しています。

毎日の時間の使い方を記録して、分析して、理想な時間の使い方に近づけるサポートをするサービスです。

ぜひ、一度使ってみてください!