「Flickity」を使ってスライダーを挿入できる23の即席コード

「Flickity」を使ってスライダーを挿入できる23の即席コード

「Flickity」を使ってスライダーを挿入できる22の即席コードを紹介しています。

スライダーを簡単に導入できる「Flickity」

「Flickity」を使用すれば、簡単にサイトにスライダーを導入することができます。しかし、使い方を知らないと意外と実装めんどうですし、覚えてもその後使うことが無かったりするので、簡単に導入できるように即席コードをまとめておきました。

導入

必要なソースの読み込みです。BootstrapとかjQueryは利便性を考えて入れているだけなので、臨機応変に対応願います。

CSS

html
<!--必要な人だけ-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!--必要な人だけ-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--必要な人だけ-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!--必要な人だけ-->
<script type="text/javascript" src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

コード集

1: デフォルト設定のまま

html
<div class="container bg-color my-5 p-5">
  <div class="flickity-1">
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.container div.flickity-1 div.carousel-cell {
  width: 100%;
  padding: 1.5em 0;
  background: #8C8;
  font-size: 80px;
  text-align: center;
  color: #fff;
}
JQuery
jQuery(function ($) {
  $('.flickity-1').flickity();
});
CodePenで編集

2:それぞれのスライドの横幅を50%にしてみる

html
<div class="container bg-color my-5 p-5">
  <div class="flickity-2">
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.container div.flickity-2 div.carousel-cell {
  width: 50%;
  padding: 1.5em 0;
  background: #8C8;
  font-size: 80px;
  text-align: center;
  color: #fff;
}
JQuery
jQuery(function ($) {
  $('.flickity-2').flickity();
});
CodePenで編集

3:スライドの横幅を50%にして、左揃えにする