I have a carousel that I wrote below and it works fine. But when I take another copy of it, nothing shows on the screen:
and I Use splide.js lib
<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>
To solve the problem in the first place, I changed the names and then I used other libraries, but they also face the problem in different ways. So I wrote it with vanilla javascript and it still has problems. I am completely stuck.
