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

Question

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

我有 2 个问题：

我如何计算图库中幻灯片的数量。（我只想运行超过 2 张幻灯片时会很轻快）
如何运行同一 post 上的多个画廊。（每个都有相同的 class 姓名 )

我想为此使用 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,
 }
)}

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

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

Flickity has two or more slides - Vanilla JavaScript

javascript

php

wordpress

advanced-custom-fields

flickity