我正在尝试在我的 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'); Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
将您的图像放入
<div>本身,您目前只有一个<div>,其中包含多个图像: