Mengapa peluncur Jquery saya tidak dipaparkan dengan betul?

Question

Saya cuba melaksanakan perpustakaan Slick Slider dalam tema tersuai WordPress saya untuk memaparkan peluncur imej yang diambil daripada pemalam Medan Tersuai Lanjutan. Walau bagaimanapun, saya menghadapi masalah di mana peluncur hanya menyusun imej di atas satu sama lain dan fungsi peluncur tidak berfungsi.

Ini yang saya lakukan setakat ini:

<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>

Ini ialah kod yang saya tambahkan pada fungsi tema kanak-kanak.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

Letakkan imej anda ke dalam <div> 本身，您目前只有一个 <div> dengan berbilang imej:

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