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

Question

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

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

У меня есть 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,
}
)}

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

Любая помощь будет отличной, заранее спасибо 🙂

Нет ответов JQuery, пожалуйста.

1

advanced-custom-fields flickity javascript php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

Смотрите это обсуждение

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

Обновленный пример на codepen

Оригинальный ответ: использование galleries.forEach() и оператор 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,
})
}
})

Пример на codepen

1