Heim  >  Fragen und Antworten  >  Hauptteil

Warum wird mein Jquery-Schieberegler nicht richtig angezeigt?

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');

P粉151720173P粉151720173222 Tage vor489

Antworte allen(1)Ich werde antworten

  • P粉310754094

    P粉3107540942024-04-04 10:01:49

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

    '; echo '' . esc_attr($hotel_image['alt']) . ''; echo '
    '; } if ($hotel_image2) { echo '
    '; echo '' . esc_attr($hotel_image2['alt']) . ''; echo '
    '; } if ($hotel_image3) { echo '
    '; echo '' . esc_attr($hotel_image3['alt']) . ''; echo '
    '; } } ?>

    Antwort
    0
  • StornierenAntwort