在下面的代码中,我试图使用jQuery(outlined here)设置Flickity幻灯片显示功能。
该代码在前端可以正常工作,但在Wordpress后端则无法工作,我希望它可以用于块预览。
但是,在注释的代码中,您会注意到它是通过Vanilla JS启动的,它工作正常吗?
有人可以识别出这里出什么问题吗?是WP管理员的怪癖吗?
// Concat Dependencies
import jQueryBridget from 'jquery-bridget';
import Flickity from 'flickity';
import imagesloaded from 'flickity-imagesloaded';
// Set Flickity as a jQuery plugin
Flickity.setJQuery( $ );
jQueryBridget( 'flickity', Flickity, $ );
jQuery(document).ready(function($){
// Setup functionality
var initializeBlock = function( block ) {
// Vars
var carousel = block.find('.carousel');
var cells = block.find('.carousel-cell');
// THIS WORKS
// var carousel = new Flickity('.carousel', {
// cellSelector: '.carousel-cell',
// cellAlign: 'left',
// imagesLoaded: true,
// lazyLoad: false,
// freeScroll: true,
// contain: true,
// groupCells: false,
// prevNextButtons: false,
// pageDots: false
// });
// }
// THIS DOESN'T WORK
carousel.flickity({
cellSelector: '.carousel-cell',
cellAlign: 'left',
imagesLoaded: true,
lazyLoad: false,
freeScroll: true,
contain: true,
groupCells: false,
prevNextButtons: false,
pageDots: true
});
};
// Initialize each block on page load (front-end)
$(document).ready(function(){
$('.custom-block.masthead').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (back-end).
if( window.acf ) {
window.acf.addAction( 'render_block_preview', initializeBlock );
}
});