Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

レスポンシブウェブデザインに使える多機能なカルーセル

More than 3 years have passed since last update.

いろいろなプラグインを使ってきましたが、今までで一番いろいろできるカルーセルのプラグインです。

slickについて

公式HPにいろいろなデモが載っているんですが一部を紹介します。
* 横カルーセル
* 縦カルーセル
* カルーセルのグループ化
* ブラウザの横幅で表示個数を変える
* 遅延読み込み
* カルーセルシンク
等など

MITライセンスなので商用利用も可能です。

公式HP

http://kenwheeler.github.io/slick/

GitHub

https://github.com/kenwheeler/slick/

ダウンロードは上記公式HP(下方)かGitHubからお願いします。
ちにみにCDNも用意されているのでHEADで読み込むだけという方法もあります。
URLはGitHubのREADMEを参照してください。

slickの使い方

GitHubからダウンロードすると以下のファイルが入っているので、適当な所に置いて読み込みましょう。

  • slick.css
  • slick-theme.css
  • slick.min.js
<style rel="stylesheet" type="text/css" src="./slick.css"></style>
<style rel="stylesheet" type="text/css" src="./slick-theme.css"></style>
<script type="text/javascript" src="./slick.min.js"></script>

公式HPのデモから抜粋してコードを紹介します。

カルーセルシンク

asNavForというオプションにシンクさせたいカルーセルのclassを指定するだけ!

<div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
</div>
$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

複数画像を一緒にスライド

slidesToScrollにグループ化したい画像数を指定するだけ!
(slidesToShowも同じ数にしたほうがキレイだと思います)

<div class="slider multiple-items">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
</div>
$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

ブラウザの横幅で表示個数を変える

responsiveオプションの中に表示を切り替える横幅を指定(breakpoint)して、表示個数を設定(slidesToShow)するだけ!

<div class="slider responsive">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
</div>
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

おわり

簡単にカルーセルが作れるので参考にしてみてください。
オプションを設定したのにドットやアローが表示されない!という人はslick-theme.cssが読み込まれているか確認してみてください。

YAmi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away