1

Flickity の画像ギャラリーを作成するために、Wordpress と ACF の柔軟なレイアウトを使用しています。

2 つの問題があります。

  1. ギャラリー内のスライドの数を数えるにはどうすればよいですか。(2 つ以上のスライドがある場合にのみ Flickity を実行したい)
  2. 同じ投稿で複数のギャラリーを実行する方法。(それぞれ同じクラス名を持っています)

これには 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 の応答はありません。

4

1 に答える 1