コピペで簡単実装!最も基本的なslickスライダーの実装方法!

Webサイトのコーダーにとって、効率的なコーディングは業務の生産性を高める鍵です。この記事では、slick.jsを活用し、コピー&ペーストで簡単に実装可能なスライダーの作成方法を紹介します。実務で即座に使えるコードサンプルを提供し、コーディング時間の短縮を実現します。

はじめに

効率的なコーディングの重要性と業務への影響

コーディングの世界では、効率性は単なる願望ではなく、必要不可欠な要素です。効率的なコーディングは、プロジェクトの時間とコストを節約し、結果的にクライアントやチームの満足度を高めることにつながります。一方で、時間のかかるコーディングプロセスは、プロジェクトの遅延やコスト超過のリスクをもたらし、最終的にはプロダクトの品質にも影響を与える可能性があります。

この記事の目的

この記事の目的は、サイトコーダーに向けて、早く効率的に実装できるスライダーの作成方法を提供することです。スライダーの実装はサイトコーディングでも頻出なので、テンプレートを用意しておいて、サイトに合わせてカスタマイズしていく方が効率が良いですよね?提供されるコードは、コピー&ペーストで簡単に利用できます。これにより、繰り返しの手間を省き、より重要なタスクに集中することができます。

slickスライダーの表示

矢印もドットも無い最も基本的なスライダーです。

スライド
スライド
スライド
スライド
スライド
スライド
スライド

slickスライダーのHTMLの基本構造

slickスライダーの場合下記ソースコードで説明すると下記の要素が必要になります。

wrapper要素「.slick__list」
各スライド要素「.slick__item」を枚数分

下記ソースコードではwrapper要素の「.slick__list」に対して、「.slick__item」を7つ用意しています。実際に使用する枚数に合わせて適宜変更してください。

HTMLのソースコード例

<div class="slick__list">
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/990d00.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/e87619.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/ffdc00.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/0079f2.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/008039.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/ffdc00.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="slick__item">
		<div class="slick__img">
			<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/03/012.webp" alt="スライド" width="300" height="300">
		</div>
	</div>
</div>

slickスライダーのHTMLで気をつける点

wrapper要素と、各スライド要素のタグには<ul>タグと<li>タグを使用しないことに注意してください。

なぜなら、slickスライダーが適用されるとwrapper要素と各スライド要素の間に「.slick-list」と「.slick-track」という要素が生成されるため、<ul>タグと<li>タグの間に<div>タグが入ってしまうからです。

<ul>タグの子要素には<li>タグしか使用してはいけないので<ul>タグと<li>タグは使用しないようにしましよう。

slickスライダー適用後のHTMLの出力<ul>タグと<li>タグを使用した場合

<ul class="slick__list slick-initialized slick-slider slick-dotted">
	<div class="slick-list draggable">
    <div class="slick-track" style="opacity: 1; width: 4794px; transform: translate3d(-1692px, 0px, 0px);">
      <li class="slick__item slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 262px;" tabindex="-1">
		    <div class="slick__img">
			    <img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/008039.webp" alt="スライド" width="300" height="300">
		    </div>
	    </li>
      <!-- 2枚目以降省略 -->
    </div>
  </div>
</ul>
wrapper要素と、各スライド要素のタグには<ul>タグと<li>タグを使用しないこと!

CSSのソースコード例

.slick__list {
    height: auto;
    padding-bottom: 50px;
    visibility: hidden;
}
.slick__list.slick-initialized {
    visibility: visible;
}
.slick__item {
    margin: 0 10px;
    height: auto;
}
.slick__img {
    position: relative;
    margin: 0 auto;
}
.slick__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.slick__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

JavaScriptソースコード例

jQuery(document).ready(function(){
	jQuery(".slick__list").slick({
		autoplay: true,
		arrows: false,
		dots: true,
		responsive: [
			{
				breakpoint: 480,
				settings: {
					slidesToShow: 1,
				}
			}
		],
		slidesToShow: 3,
	});
});

必要なライブラリのCDN

HTMLの<head>タグ内に下記を記載してください。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

</body>の閉じタグの近くで、上記で紹介したJavaScriptよりも上に、下記のjQueryとslick.min.jsを読み込んでください。

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

jQueryのCDN公式

上記のjQueryのCDNは下記公式サイトのものを使っています。

「jQuery 3.x」の「jQuery Core 3.7.1」の「minified」をクリックして表示されるCDNです。

https://releases.jquery.com/

slickのCDN

https://kenwheeler.github.io/slick/#go-get-it

まとめ

本記事では、ウェブサイトのコーダーが効率的にスライダーを実装する方法について紹介しました。この記事のソースコードを利用することでコーディングの手間を省き、プロジェクトの時間とコストを節約することができます。

>お問い合わせはこちら

お問い合わせはこちら