如何在 Bootstrap 3.3.4 中获取 Carousel 的总数和当前幻灯片数量 [英] How to Get total and Current Slide Number of Carousel in Bootstrap 3.3.4

查看：25
本文介绍了如何在 Bootstrap 3.3.4 中获取 Carousel 的总数和当前幻灯片数量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，我想在 bootstrap 3.3.4 中获取当前轮播的幻灯片编号我已经在以下 3 个版本中使用了这个脚本并且运行良好，但是在 3.3.4 版本中没有工作，任何人都可以帮助我摆脱这种情况提前谢谢使用的代码

var totalItems = $('.item').length;var currentIndex = $('div.active').index() + 1;$('.num').html(''+currentIndex+'/'+totalItems+'');$('#myCarousel').carousel({间隔:2000});$('#myCarousel').bind('slid', function() {currentIndex = $('div.active').index() + 1;$('.num').html(''+currentIndex+'/'+totalItems+'');});

.container {边距顶部:10px；}.nu​​m{背景:#000；颜色:#fff;填充:10px；宽度:50px；文字对齐:居中；}

<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="容器"><div class="井 span9 列"><div id="myCarousel" class="轮播幻灯片"><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 class="item"><img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""/>

<div class="item"><img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""/>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

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

但是当我在 3.3.4 版本中使用时它不起作用，请帮助我

解决方案

试试这个:

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

Hello guys i want to get current slide number of carousel in bootstrap 3.3.4 i already used this script in below 3 version and work perfectly but in version 3.3.4 not working any one help me out of this situation thnx in advance code which is use

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>

but when i used in version 3.3.4 it did not working please please help me

解决方案

Try this one:

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

这篇关于如何在 Bootstrap 3.3.4 中获取 Carousel 的总数和当前幻灯片数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆