slick実装の基本

2023.09.17

オススメのスライダーslickを実装する

スライダー入れてない企業サイトってほとんど見ない気がするけど、気のせいですかね？　いや気のせいですね（そういうサイトは動画が流れてる）。でもそれくらいよく見かけるし商品や事業内容などの訴求に効果的で使いやすいのがスライダーです。シトラスデザインではもちろん実装可能です。横スライドだったりフワッと入れ替わったり、細かいご要望にも対応可能なので是非ご相談を。

今日はWebサイト制作のど定番機能と言っても過言ではないスライダーの実装について。前回はbxsliderをやったけどオススメのやつがもう一つあります。そう、slickです！

カルーセルと複数設置がやりやすい「slick」

bxsliderと双璧をなすスライダーと言えばFlexSliderという方もいるでしょうけれど、使った感覚でより使いやすいのがslickです（もちろん個人の感想）。

slickをよく利用するようになったきっかけはカルーセルのカスタマイズが豊富だったことと、同一ページ内に複数設置して各々独立したコントロールが出来る点でした。bxslider、FlexSliderでも可能かもしれませんが、個人的にはslickが一番使いやすかったです。

ではslickの使い方と最低限の機能を実装してみましょう。

最低限の実装方法

<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>
		$(function () {
		  $('.slide-items').slick({
			autoplay: true,
			arrows: true,
    		dots: true,
			fade: true,
		  });
		});
    </script>
    
    <style>
		img{
			width:100%;
			height:auto;
			display:block;
		}
		ul{
			list-style:none;
			max-width:500px;
			width: 100%;
			margin:0;
			padding:0;
		}
		
		.slide-items .slick-arrow {
		  position: absolute;
		  top: 50%;
		  width: 50px;
		  height: 55px;
		  background: #FFF;
		  cursor: pointer;
		  z-index: 1;
		  transform: translateY(-50%);
		}
		.slide-items .slick-arrow::before {
		  position: absolute;
		  top: 20px;
		  width: 12px;
		  height: 12px;
		  content: '';
		  border: 1px solid #000;
		  border-width: 3px 3px 0 0;
		  transform: rotate(45deg);
		  display: block;
		}
		.slide-items .slick-next {
		  right: 0;
		}
		.slide-items .slick-prev {
		  left: 0;
		}
		.slide-items .slick-next::before {
		  left: 16px;
		}
		.slide-items .slick-prev::before {
		  border-width: 0 0 3px 3px;
		  right: 18px;
		}
	</style>

  </head>
  <body>

    <ul class="slide-items">
        <li><img src="ph01.jpg" alt=""></li>
        <li><img src="ph02.jpg" alt=""></li>
        <li><img src="ph03.jpg" alt=""></li>
        <li><img src="ph04.jpg" alt=""></li>
        <li><img src="ph05.jpg" alt=""></li>
    </ul>

  </body>
</html>

HTML、Javascriptはもちろん、CSSもすべて最低限のものです！
<ul>タグを使ってますが<div>タグでもいけます。
あなたのデザインに合ったものに作り変えてくださいね。

カルーセル＆複数設置した場合の実装方法

<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>
		//スライダー1つめ
		$(function () {
		  $('.slide-items').slick({
			autoplay: true,
			centerMode: true,
			centerPadding: "15%",
			arrows: true,
    		dots: true,
		  });
		});
		
		//スライダー2つめ
		$(function () {
		  $('.slide-items2').slick({
			autoplay: true,
			centerMode: true,
			centerPadding: "15%",
			arrows: true,
    		dots: true,
		  });
		});
    </script>
    
    <style>
		body{
			width:100%;
			margin:0 auto;
		}
		
		img{
			width:100%;
			height:auto;
			display:block;
		}
		ul{
			list-style:none;
			max-width:500px;
			width: 100%;
			margin:0 auto;
			padding:0;
		}
		
		li{
			margin: 0 10px;
		}
		
		.slide-items .slick-arrow,
		.slide-items2 .slick-arrow {
		  position: absolute;
		  top: 50%;
		  width: 50px;
		  height: 55px;
		  background: #FFF;
		  cursor: pointer;
		  z-index: 1;
		  transform: translateY(-50%);
		}
		.slide-items .slick-arrow::before,
		.slide-items2 .slick-arrow::before {
		  position: absolute;
		  top: 20px;
		  width: 12px;
		  height: 12px;
		  content: '';
		  border: 1px solid #000;
		  border-width: 3px 3px 0 0;
		  transform: rotate(45deg);
		  display: block;
		}
		.slide-items .slick-next,
		.slide-items2 .slick-next {
		  right: 0;
		}
		.slide-items .slick-prev, 
		.slide-items2 .slick-prev {
		  left: 0;
		}
		.slide-items .slick-next::before,
		.slide-items2 .slick-next::before {
		  left: 16px;
		}
		.slide-items .slick-prev::before,
		.slide-items2 .slick-prev::before {
		  border-width: 0 0 3px 3px;
		  right: 18px;
		}
	</style>

  </head>
  <body>
	
    <div style="margin-bottom:50px;">
        <ul class="slide-items">
            <li><img src="ph01.jpg" alt=""></li>
            <li><img src="ph02.jpg" alt=""></li>
            <li><img src="ph03.jpg" alt=""></li>
            <li><img src="ph04.jpg" alt=""></li>
            <li><img src="ph05.jpg" alt=""></li>
        </ul>
    </div>
    
    <div style="margin-bottom:50px;">
        <ul class="slide-items2">
            <li><img src="ph01.jpg" alt=""></li>
            <li><img src="ph02.jpg" alt=""></li>
            <li><img src="ph03.jpg" alt=""></li>
            <li><img src="ph04.jpg" alt=""></li>
            <li><img src="ph05.jpg" alt=""></li>
        </ul>
    </div>

  </body>
</html>

centerMode: trueでカルーセルに。centerPadding: “15%”は両サイドに見えてる分の幅をどれくらいにするかって設定です。画像間の隙間はCSSで設定します。

最後はよく使うオプションです。他にもたくさんありますが、必要に応じてお調べください。

よく使うオプション一例

オプション名説明
autoplayスライドを自動で再生するかどうかを指定します。trueの場合は自動再生されます。
arrows前後のスライドに移動するための矢印ボタンを表示するかどうかを指定します。trueの場合は表示されます。
dotsスライドの現在位置を示すドットナビゲーションを表示するかどうかを指定します。trueの場合は表示されます。
infiniteスライドをループさせるかどうかを指定します。trueの場合はループさせます。
speedスライドの遷移にかかる時間（ミリ秒）を指定します。デフォルトは300です。

それではまた。

タイトルとURLをコピーしました