Flickityを使ってカルーセルスライダーを設置する方法

2022年3月20日 2022年4月5日 4分34秒

1 Flickityを使ってカルーセルスライダーを設置
2 サンプル
3 HTML
4 CSS
5 CDN

Flickityを使ってカルーセルスライダーを設置

「Flickity」というライブラリを使用すると、HTMLとCSSのみで、簡単にカルーセルスライダーを作成することができます。

サンプル

HTML

<div class="slider-wrapper js-flickity"
  data-flickity-options='{ "wrapAround": true, "autoPlay": 5000 }'>
  <div class="slider-cell"></div>
  <div class="slider-cell"></div>
  <div class="slider-cell"></div>
  <div class="slider-cell"></div>
  <div class="slider-cell"></div>
</div>

HTMLは、自分で使用する場合用にクラス名など、Flickityのサイトから変更をしています。

また、wrapAround、autoPlayも、自分が設定するので記載をしてあります。

CSS

.slider-wrapper {
  background: #EEE;
}
 
.slider-cell {
  width: 90%;
  height: 200px;
  background: #8C8;
  margin-right: 10px;
  counter-increment: carousel-cell;
}

.slider-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- Javascript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

CDNは、最新かどうか、Flickityのホームページを確認してください。

WordPressで実装をしたい場合、JSとCSSは、以下のソースをfunctions.phpへ追記すると読み込めます。

/**
 * JS、CSSの追加
 */
function add_files() {
	/* Flickity */
	// js
	wp_enqueue_script( 'Flickity', '//unpkg.com/flickity@2/dist/flickity.pkgd.min.js', "", "20220401", false );
	// css
	wp_enqueue_style( 'Flickity', '//unpkg.com/flickity@2/dist/flickity.min.css', "", '20220401' );
}

add_action( 'wp_enqueue_scripts', 'add_files' );