为什么我的 Jquery 滑块无法正确显示？

Question

我正在尝试在我的 WordPress 自定义主题中实现 Slick Slider 库，以显示从高级自定义字段插件获取的图像滑块。但是，我遇到了滑块只是将图像堆叠在一起的问题，滑块功能不起作用。

这是我到目前为止所做的事情：

<article>
    <div class="entry-content">
        <h2 class="wp-block-heading has-text-align-center"><?php the_title(); ?></h2>
        <div class="hotel-description"><h2> Hotel Description: </h2> <?php echo $hotel_description; ?></div>
        <div class="hotel-services"><h2> Hotel Services </h2><?php echo $hotel_services; ?></div>

 <div class="hotel-images-slider">
    <?php
    // Output the images
    if ($hotel_image || $hotel_image2 || $hotel_image3) {
        echo '<div>';
        if ($hotel_image) {
            echo '<img src="' . esc_url($hotel_image['sizes']['medium']) . '" alt="' . esc_attr($hotel_image['alt']) . '" class="custom-image-class" />';
        }
        if ($hotel_image2) {
            echo '<img src="' . esc_url($hotel_image2['sizes']['medium']) . '" alt="' . esc_attr($hotel_image2['alt']) . '" class="custom-image-class" />';
        }
        if ($hotel_image3) {
            echo '<img src="' . esc_url($hotel_image3['sizes']['medium']) . '" alt="' . esc_attr($hotel_image3['alt']) . '" class="custom-image-class" />';
        }
        echo '</div>';
    }
    ?>
</div>


        

    <?php

endwhile;
?>
    </article>

这是我添加到子主题的functions.php中的代码

function enqueue_slick_slider() {
    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_slick_slider');


function initialize_slick_slider() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('.hotel-images-slider').slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1
            // Add more configuration options as needed
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_slick_slider');

Answer 1

将您的图像放入 <div> 本身，您目前只有一个 <div> ，其中包含多个图像：

    ';
            echo '';
            echo '
';
        }
        if ($hotel_image2) {
            echo '
';
            echo '';
            echo '
';
        }
        if ($hotel_image3) {
            echo '
';
            echo '';
            echo '
';
        }
    }
    ?>