我正在尝试将[Flickity Carousel][1]添加到我的Wordpress主题中。昨天我成功了。然而,当我今天早上回到主题时,旋转木马文件没有加载。我不确定出了什么问题,或者我是否遗漏了什么。我还利用了先进的自定义场和超光速子,真的很想拥有一双全新的眼睛。
这里是我将文件排队的地方
function flickity_scripts() {
wp_enqueue_script( \'flickityjs\', get_template_directory_uri() . \'/js/flickity.pkgd.min.js\', array( \'jquery\' ), \'1.9.0\', true );
wp_enqueue_script( \'flickityjs-init\', get_template_directory_uri(). \'/js/flickity.init.js\', array( \'flickityjs\' ), \'1.9.0\', true );
wp_enqueue_style( \'flickitycss\', get_template_directory_uri() . \'/css/flickity.min.css\', \'all\');
}添加操作(“wp\\u enqueue\\u scripts”、“flickity\\u scripts”);
这是flickityjs init files内容
jQuery(document).ready(function($){
$(\'.main-carousel\').flickity({
// options
cellAlign: \'left\',
contain: true,
autoPlay: 6000,
wrapAround: true,
selectedAttraction: 0.009,
friction: 0.3,
prevNextButtons: false,
});
});
这是旋转木马的html
<section class="main-carousel relative pt4 pb7 overflow-hidden" style="background-color: <?php the_sub_field (\'gallery_background_color\');?>">
<?php $images = get_sub_field(\'gallery\'); if( $images ): ?>
<div class="carousel-box" style="background-color: <?php the_sub_field (\'gallery_background_color\');?>"></div>
<div class="main-carousel">
<div class="carousel-container">
<?php foreach( $images as $image ): ?>
<div class="ma0 gallery-slide">
<div class="bg-center cover vh-75 list"style="background-image: url(<?php echo $image[\'url\']; ?>)" alt="<?php echo $image[\'url\']; ?>"></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif;?>