javascript - Flickity 有两张或更多幻灯片 - Vanilla JavaScript

Question

我正在使用 Wordpress 和 ACF 灵活布局来创建 Flickity 图像库。

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

当前状态，代码正在每个帖子处理一个画廊，并且即使只有一张幻灯片也具有 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()和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