我无法在index.php中使用两个旋转木马

pcww981p  于 2023-04-19  发布在  PHP
关注(0)|答案(1)|浏览(107)

我有一个旋转木马,我写在下面,它的工作正常。但当我把它的另一个副本,什么都没有显示在屏幕上:
使用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写了它,它仍然有问题。我完全卡住了。

mgdq6dx1

mgdq6dx11#

尝试为carousel使用新的类或id,并在js文件中注册新的carousel设置

new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
} );

并使用类.splide-new创建新的carousel

new Splide( '.splide-new', {
  type   : 'loop',
  perPage: 3,
} );

相关问题