【问题标题】:How to Get total and Current Slide Number of Carousel in Bootstrap 3.3.4如何在 Bootstrap 3.3.4 中获取轮播的总数和当前幻灯片数
【发布时间】:2019-10-24 00:30:41
【问题描述】:

大家好,我想在引导程序 3.3.4 中获取轮播的当前幻灯片编号,我已经在 3 以下版本中使用了此脚本并且可以完美运行,但是在 3.3.4 版本中没有任何人可以帮助我摆脱这种情况 提前谢谢 正在使用的代码

var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');

$('#myCarousel').carousel({
    interval: 2000
});

$('#myCarousel').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
   $('.num').html(''+currentIndex+'/'+totalItems+'');
});
.container {
    margin-top: 10px;
}
.num{
    background:#000;
    color:#fff;
    padding:10px;
    width:50px;
    text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="well span9 columns">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" />
                </div>
            </div> 
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
    </div>
</div>

<div class="num"></div>

但是当我在 3.3.4 版本中使用时它没有工作请帮助我

【问题讨论】:

    标签: javascript jquery twitter-bootstrap


    【解决方案1】:

    试试这个:

    $('#myCarousel').on('slide.bs.carousel', function() {
        currentIndex = $('div.active').index() + 1;
       $('.num').html(''+currentIndex+'/'+totalItems+'');
    });
    

    【讨论】:

    • thnx 伙计,你能帮我多一点吗,目前它以 /3 开头,在下一张幻灯片上显示 1/3,在最后一张幻灯片上显示 2/3,但我希望它从 1 开始/3 最后一张幻灯片显示 3/3 plx 帮助我解决这个问题
    • 当然我可以帮助你,但没有得到问题。当我运行代码 sn-p 时,它从 1/3 开始,最后一个已经是 3/3。我错了吗?
    • 是的,你说得对,它从 1/3 开始,到 3/3 结束,但这在我的代码 sn-p 中有效,它在 3.0.0 版本上运行,但是当我在 3.3 版本上运行你的脚本时.4 它从 /3 开始,到 2/3 结束,你能在代码 sn-p 处显示你的脚本吗?
    • 不客气.. 请不要忘记投票 :) 谢谢
    • 实际上,'slide.bs.carousel' 在幻灯片开始之前工作,但在完成幻灯片之后'slid.bs.carousel'。
    猜你喜欢
    • 2013-07-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多