レスポンシブで使うカルーセルスライダーなら「slick」が便利

レスポンシブで使うカルーセルスライダーならシンプルな「slick」がおすすめです。

※「Download Now」はリンク切れの場合は「View On Github」からダウンロードが可能。

今回はヤフーショッピングサイト用にイベントバナー用を作ってみました、楽天でも使えると思います。

ダウンロードで使用するファイル

fontsフォルダ
slick.css
slick-theme.css
slick.min.js

ダウンロード版

<!DOCTYPE html>
<html>
<head>
  <title>Slick ダウンロード版</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="slick/slick.css">
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
  <style type="text/css">
      html, body {
      margin: 0;
      padding: 0;
    }
    .slider {
        width: 100%;
        margin: 0px auto;
    }
    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide img {
      width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
	.slick-next {
    right: 35px;
    z-index: 99;
}
.slick-prev {
     left: 35px;
    z-index: 100;
}
  </style>
</head>
<body>

<section class="center slider">
    <div>
      <img src="https://placehold.it/468x100?text=1">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=2">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=3">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=4">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=5">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=6">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=7">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=8">
    </div>
    <div>
      <img src="https://placehold.it/468x100?text=9">
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".center").slick({
        autoplay:true,
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1
});
    });
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Slick ダウンロード版</title>

html, body {

margin: 0;

padding: 0;

}

.slider {

width: 100%;

margin: 0px auto;

}

.slick-slide {

margin: 0px 20px;

}

.slick-slide img {

width: 100%;

}

.slick-prev:before,

.slick-next:before {

color: black;

}

.slick-next {

right: 35px;

z-index: 99;

}

.slick-prev {

left: 35px;

z-index: 100;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</section>

$(document).on('ready', function() {

$(".center").slick({

autoplay:true,

dots: true,

infinite: true,

centerMode: true,

slidesToShow: 2,

slidesToScroll: 1

});

</script>

</body>

</html>

CDNライブラリーでの読み込み

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>

最新バージョンの確認はこちらで

上記以外にjQueryの読み込みが必要ですが、「slick1.9.0」には2.2.0が一番安定していました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

次ページではHTML単体で動くサンプルの紹介。