Flickityには2つ以上のスライドがあります - バニラJavaScript

Question

Flickityイメージギャラリーを作成するには、WordpressとACFのフレキシブルレイアウトを使用しています。

1. がどのように私はギャラリーのスライドの数をカウントします：

   私は2つの問題を抱えています。 （2枚以上のスライドがある場合は Flickityを実行したいだけです）

2. 同じ投稿で複数のギャラリーを実行するにはどうすればいいですか？ （それぞれが同じ クラス名を持っている）

私は、このためにnuSkoolバニラ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つのギャラリーでの作業とpageDotsを持っており、prevNextButtonsはただ一つのスライドがあっても制御しています。事前:)

で

すべてのヘルプは素晴らしいことだ、おかげではありませんjQueryの応答してください。

Answer 1

回答の更新： IEのサポートにArray.from()ではなくArray.prototype.forEach.callを使用してください。

See this discussion

const galleries = document.querySelectorAll('.gallery') 

Array.prototype.forEach.call(galleries, (gallery) => { 
    const slides = gallery.querySelectorAll('.slide') 
    if(slides.length > 1){ 
    const gallerySlider = new Flickity(gallery, { 
    setGallerySize: true, 
    pageDots: true, 
    prevNextButtons: true, 
    autoPlay: 10000, 
    imagesLoaded: true, 
    }) 
    } 
}) 

Updated Example on codepen

---

オリジナル回答：スライドの数を決定する使用galleries.forEach()とAN、if文。また、古いブラウザのサポートにはArray.from()を使用してください。

const galleries = Array.from(document.querySelectorAll('.gallery-slider')) 

galleries.forEach(gallery => { 
    const slides = gallery.querySelectorAll('.slide') 
    if(slides.length > 1){ 
    const gallerySlider = new Flickity(gallery, { 
    setGallerySize: true, 
    pageDots: true, 
    prevNextButtons: true, 
    autoPlay: 10000, 
    imagesLoaded: true, 
    }) 
    } 
}) 

Example on codepen