Pourquoi mon curseur Jquery ne s'affiche-t-il pas correctement ?
P粉151720173
P粉151720173 2024-04-03 10:43:26
0
1
521

J'essaie d'implémenter la bibliothèque Slick Slider dans mon thème personnalisé WordPress pour afficher un curseur d'image extrait du plugin Advanced Custom Fields. Cependant, je rencontre un problème où le curseur empile simplement les images les unes sur les autres et la fonctionnalité du curseur ne fonctionne pas.

Voici ce que j'ai fait jusqu'à présent :

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

C'est le code que j'ai ajouté au fichier function.php du thème enfant

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粉151720173
P粉151720173

répondre à tous(1)
P粉310754094

Mettez votre image dans <div> 本身,您目前只有一个 <div> avec plusieurs images :

'; 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 '
'; } } ?>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal