Bootstrap Carousel jQuery 1 of 5滑块编号在点击之前不会更新

Below my Bootstrap 4 Carousel, I have an indicator saying the current slide number and the total amount of sliders, so 1 of 5, 2 of 5, 3 of 5, etc.

Using the Bootstrap hook, my counter should increment when the next slide is clicked, which it does, but not until two slides have been clicked so it will stay on 1 of 5 for two slides before updating to 2 of 5 and functionally normally, but because it doesn't start, the order is incorrect:

First: 1/5 Second: 1/5 Third: 2/5 Forth: 3/5 Fifth: 4/5 First(again): 5/5

Whereas it should start at 1/5 then on click, go to 2/5, then 3/5 etc according to the actual slide number.

Here is my jQuery code

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>');

    });
});

I added + 1 to the index as it started at 0. (0 of 5 instead of being 1 of 5)

And my HTML / PHP Carousel

<?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;
        ?>

Any help would be greatly appreciated

dtttlua7165
dtttlua7165 你应该使用基于owl-carouselJS的插件,它有许多这样的功能,可以帮助你实现你的目标。
接近 2 年之前 回复

1个回答



请删除 data-interval =“false”</ code>或从你的html部分将其设为true然后认识我。 </ p>
</ div>

展开原文

原文

Please remove data-interval="false" or make it true from your html section then know me.

duanpanhuo0618
duanpanhuo0618 我将数据间隔设置为true但发生了同样的事情,但现在它会自动滑动
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐