1

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

我有两个问题：

  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 响应。

4

1 回答 1

1

更新答案：使用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()and 一个 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 上的示例

于 2017-02-01T00:35:38.913 回答