我有一个旋转木马,我写在下面,它的工作正常。但当我把它的另一个副本,什么都没有显示在屏幕上:
使用splide.js库
<div class="MySlider">
<div class="title">
<h1><?php echo get_theme_mod('landingpage_learnslider_title'); ?></h1>
<h3><?php echo get_theme_mod('landingpage_learnslider_description'); ?></h3>
</div>
<div class="slider_wrapper">
<div class="splide">
<div class="splide__track">
<div class="splide__list">
<?php
$args = array(
'post_type' => 'my_carousel',
'posts_per_page' => 5,
);
$carousel_query = new WP_Query($args);
if ($carousel_query->have_posts()) :
while ($carousel_query->have_posts()) :
$carousel_query->the_post();
?>
<div class="splide__slide">
<div class="card">
<img src="<?php echo get_field('post_image')['url']; ?>" alt="<?php echo get_field('alt_img'); ?>">
<div class="main_text">
<a href="<?php the_permalink(); ?>">
<h1><?php the_title(); ?></h1>
</a>
<div class="author">
<h2><i class="fa-solid fa-chalkboard-user"></i>
<?php echo get_field('Author'); ?> </h2>
</div>
<div class="text_child_box">
<div class="text_child_rate">
<h3><?php echo get_field('price'); ?> $ </h3>
<div class="main_rate">
<?php
$rating = get_field('rating_stars');
for ($i = 1; $i <= 5; $i++) {
if ($i <= $rating) {
echo '<i class="fa-solid fa-star"></i>';
} else {
echo '<i class="fa-regular fa-star"></i>';
}
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<p>There is no content to display</p>';
endif;
?>
</div>
</div>
</div>
</div>
</div>
为了首先解决这个问题,我改变了名字,然后我使用了其他库,但他们也以不同的方式面对这个问题。所以我用vanilla javascript写了它,它仍然有问题。我完全卡住了。
1条答案
按热度按时间mgdq6dx11#
尝试为carousel使用新的类或id,并在js文件中注册新的carousel设置
并使用类.splide-new创建新的carousel