我正在嘗試在我的 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');
將您的圖像放入
<div>本身,您目前只有一個<div>,其中包含多個圖像: