Question

在我的Bootstrap 4 Carousel下方，我有一个指示器，指示当前的幻灯片编号和滑块的总数，因此5之1，2之5，3之5，等等。

使用Bootstrap钩子，单击下一张幻灯片时，计数器应递增，但直到单击两张幻灯片后，计数器才会递增，因此它将保持在两张幻灯片的5张中的1张，然后更新为5张中的2张，并在功能上正常，但是因为它没有开始，所以顺序不正确：

第一名：1/5 秒：1/5 第三名：2/5 第四：3/5 第五：4/5 第一（再次）：5/5

它应该从1/5开始，然后单击，然后根据实际幻灯片编号转到2/5，然后是3/5，等等。

这是我的jQuery代码

jQuery(function($) {
    var totalItems = $('.carousel-item').length;
    var currentIndex = $('div.active').index() + 1;

    $('#carousel-number').html('<p>'+currentIndex+' of '+totalItems+'</p>');
    $('#brands-carousel').on('slide.bs.carousel', function () {

        currentIndex = $('div.active').index() + 1;
        $('#carousel-number').html('<p>'+currentIndex+' of '+totalItems+'</p>');

    });
});

当索引从0开始时，我在索引中添加了+1（从5中的0改为5中的1）

还有我的HTML / PHP轮播

<?php
        if( have_posts() ) :
            $count = 0;
            $counti = 0;
            $content = apply_filters( 'the_content', get_the_content() );
            ?>
            <div class="brands-carousel">
                <div id="brands-carousel" class="carousel slide" data-ride="carousel" data-interval="false">

                <div class="carousel-navigation">
                    <ol class="carousel-indicators" id="carousel-indicators">
                        <?php
                        while( have_posts()) : the_post(); ?>
                            <li id="carousel-number" data-target="#brands-carousel" data-slide-to="<?php echo $counti; ?>" class="<?php echo ($counti == 0 ? 'active' : 'hide'); ?>">
                            </li>
                            <?php
                        endwhile;
                        ?>
                    </ol>
                    <a class="carousel-control-prev" data-target="#brands-carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" data-target="#brands-carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

                    <div class="carousel-inner" role="listbox">
                        <?php
                        while(have_posts()) : the_post();
                            ?>
                            <div class="carousel-item <?php echo ($count == 0 ? 'active' : '') ?>">
                                <div id="content">
                                    <div class="row different-row">
                                        <div class="col-6 the-difference">
                                        <h1>The Difference</h1>
                                            <p><?php the_title(); ?></p>
                                        </div>
                                        <div class="col-6 the-benefit">
                                            <h1>The benefit to you</h1>
                                            <div class="benefit-wrap">
                                                <?php echo apply_filters( 'the_content', get_the_content() ); ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php
                            $count++;
                        endwhile;
                        ?>

                    </div>
                </div>
            </div>
        <?php
        endif;
        ?>

任何帮助将不胜感激

Answer 1

请从您的html部分中删除data-interval="false"或将其设为true，然后认识我。

Bootstrap Carousel jQuery 1 of 5滑块编号，直到单击后才会更新

1 个答案: