В работе мне нужна карусель, с каунтером. На jsfiddle она работает корректно. Но когда вставляю ее в хтмл документ, и подключаю ксс и жс - каунтер не работает. Рабочаю карусель -
jsfiddle.net/jme11/r6Vc4
index.html
<DOCTYPE HTML!>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style-carusel2.css">
<!-- Latest co
mpiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script-carusel2.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12" style="text-align: center;">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal number 1
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch demo modal number 2
</button>
<!-- Modal 1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Number 1</h4>
</div>
<div class="modal-body">
<!-- Carousel 1: data-interval is set to 1 second for demo purposes -->
<div id="carousel1" class="carousel slide" data-interval="1000">
<div class="numslide"></div>
<div class="carousel-inner">
<div class="item active">
<img src="http://fpoimg.com/558x300?text=Carousel%201%20Slide%201" alt="image 1">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%201%20Slide%202" alt="image 2">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%201%20Slide%203" alt="image 3">
</div>
</div>
<a class="left carousel-control" href="#carousel1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Number 2</h4>
</div>
<div class="modal-body">
<!-- Carousel 2: data-interval is set to 1 second for demo purposes -->
<div id="carousel2" class="carousel slide" data-interval="1000">
<div class="numslide"></div>
<div class="carousel-inner">
<div class="item active">
<img src="http://fpoimg.com/558x300?text=Carousel%202%20Slide%201" alt="image 1">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%202%20Slide%202" alt="image 2">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%202%20Slide%203" alt="image 3">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%202%20Slide%204" alt="image 4">
</div>
<div class="item">
<img src="http://fpoimg.com/558x300?text=Carousel%202%20Slide%205" alt="image 5">
</div>
</div>
<a class="left carousel-control" href="#carousel2" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> <!-- /col-md-12 -->
</div> <!-- /row -->
</div> <!-- /container -->
</body>
</html>
script-carusel2.js
//Set the text of the numslide classes when the page is loaded
$('.numslide').each(function(){
var total = $(this).parents('.carousel').find('.carousel-inner .item').length;
$(this).text('FOTO 1 DE '+total);
});
$('.carousel').on('slid.bs.carousel', function () {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
var total = carouselData.$items.length;
// index is 0-based so add 1 to it
var txt = 'FOTO '+(currentIndex + 1)+' DE '+total;
//MAKE SURE that each of your carousels has an element with the class numslide
//you don't need to make them unique because we're using this to target
$(this).find('.numslide').text(txt);
});
$('.modal').on('show.bs.modal', function () {
$(this).find('.carousel').carousel('cycle');
});
$('.modal').on('hidden.bs.modal', function () {
//the first line below is optional to reset the carousel so it starts
//from the first slide each time you click the modal button
//without it the carousel will start at which ever slide it was on
//when the modal was closed
$('.carousel').carousel(0);
$(this).find('.carousel').carousel('pause');
});
style-carusel2.css
.numslide {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
font-weight: bold;
}
UPD: Проблема решена. Заменил самую новейшую версию javascript файла бутстрапа на ту, которая используется на jsfiddle.net/jme11/r6Vc4 .
