javascript - 使用 slick 创建自定义帖子滑块

Question

我一直在尝试使用 slick-slider 为我的 wordpress 页面创建一个最近的帖子滑块。我希望能够使用简码将滑块添加到 elementor 中。我在编码方面没有太多经验。所以我不确定我哪里出错了。我设法根据我在网上找到的一些示例编写了以下代码，并使用用于 wordpress 的自定义 js 插件添加了 javascript 文件。我显然做错了什么，因为如果我激活这个文件，elementor 将不会因为严重错误而加载。我一直在尝试创建自定义帖子滑块一段时间，但没有任何成功。我真的很感激我能得到的任何帮助。谢谢！

//Enqueue Slick
function add_slick() {

    wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/assets/css/slick.css' );

    wp_enqueue_style( 'slider-theme', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css');

    wp_enqueue_script( 'slick-script', get_stylesheet_directory_uri() . '/assets/js/slick.min.js');

}
add_action( 'wp_enqueue_scripts', 'add_slick' );

//Build Shortcode to Loop Over Testimonials
function recentpost_loop_func( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
    ) );

    if ( $query->have_posts() ) { ?>
        <div class="recentpost-slider">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <div class="single-post">
                <a class="single-post-image" href="<?php the_permalink(); ?>"><?the_post_thumbnail(); ?></a>
                <a class="single-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
            <?php endwhile;
            wp_reset_postdata(); ?>
        </div>
    <?php $myvariable = ob_get_clean();
    return $myvariable;
    }
};

add_shortcode( 'recentpostSlider', 'recentpost_loop_func' ); 


//Initiliaze Slick

jQuery(document).ready(function(){
  $('.recentpost-slider').slick({
    centerMode: true,
    centerPadding: 50px,
  });
});

标签： javascriptwordpresscarouselslick.js