Flickityを使ってカルーセルスライダーを設置
「Flickity」というライブラリを使用すると、HTMLとCSSのみで、簡単にカルーセルスライダーを作成することができます。
Flickity >>
サンプル
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' );