為什麼我的 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 '
';
        }
    }
    ?>