Flickity の画像ギャラリーを作成するために、Wordpress と ACF の柔軟なレイアウトを使用しています。
2 つの問題があります。
- ギャラリー内のスライドの数を数えるにはどうすればよいですか。(2 つ以上のスライドがある場合にのみ Flickity を実行したい)
- 同じ投稿で複数のギャラリーを実行する方法。(それぞれ同じクラス名を持っています)
これには nuSkool Vanilla JS オプションを使用したいと思います。ドキュメントを参照してください: http://flickity.metafizzy.co/#initialize-with-vanilla-javascript
PHP
<div class="gallery-slider flickity">
<?php $i = 0; if(get_sub_field('gallery')): while(has_sub_field('gallery')): ?>
<?php $attachment = get_sub_field('images'); ?>
<img class="slide" src="<?php echo $attachment['sizes']['800cropped']; ?>" alt="<?php echo $attachment['alt']; ?>">
<?php $i++; endwhile; endif; ?>
</div>
バニラJS
'use strict'
const Flickity = require('flickity')
const galleries = document.querySelector('.gallery-slider')
if (galleries) {
const gallery = new Flickity( galleries, {
setGallerySize: true,
wrapAround: true,
pageDots: true,
prevNextButtons: true,
autoPlay: 10000,
imagesLoaded: true,
}
)}
現在の状態では、コードは投稿ごとに 1 つのギャラリーで動作しており、スライドが 1 つしかない場合でも pageDots および prevNextButtons コントロールがあります。
事前に感謝します:)
jQuery の応答はありません。