Flickity имеет два или более слайда - Vanilla JavaScript

Question

Я использую гибкие макеты Wordpress и ACF для создания галерей изображений Flickity.

У меня 2 вопроса:

1. Как подсчитать количество слайдов в галерее. (Я хочу только запустить Flickity, если есть более 2 слайдов)
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> 

Vanilla 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, 
} 
)} 

Текущий статус, код работает с одной галереей на должность и имеет pageDots и prevNextButtons управления, даже если есть только один слайд ,

Любая помощь будет здорово, спасибо заранее :)

нет JQuery ответы пожалуйста.

Answer 1

Обновленный ответ: Используйте Array.prototype.forEach.call, а не Array.from() для поддержки IE.

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() и если заявление, чтобы определить количество слайдов. Кроме того, для поддержки старого браузера используйте 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