Warum wird mein Jquery-Schieberegler nicht richtig angezeigt?

Question

Ich versuche, die Slick Slider-Bibliothek in meinem benutzerdefinierten WordPress-Theme zu implementieren, um einen Bild-Slider anzuzeigen, der aus dem Plugin „Erweiterte benutzerdefinierte Felder“ stammt. Allerdings stoße ich auf ein Problem, bei dem der Schieberegler die Bilder einfach übereinander stapelt und die Schiebereglerfunktion nicht funktioniert.

Das habe ich bisher gemacht:

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

Dies ist der Code, den ich der „functions.php“ des untergeordneten Themes hinzugefügt habe

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 '
';
        }
    }
    ?>