Skip to content

Commit 7f9ff0b

Browse files
fatfat
committed
add js support for carousel indicators
1 parent e9eff0c commit 7f9ff0b

8 files changed

Lines changed: 73 additions & 25 deletions

File tree

‎docs/assets/js/bootstrap-carousel.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
var Carousel = function (element, options) {
3030
this.$element = $(element)
31+
this.$indicators = this.$element.find('.carousel-indicators')
3132
this.options = options
3233
this.options.pause == 'hover' && this.$element
3334
.on('mouseenter', $.proxy(this.pause, this))
@@ -44,25 +45,29 @@
4445
return this
4546
}
4647

48+
, getActiveIndex: function () {
49+
this.$active = this.$element.find('.item.active')
50+
this.$items = this.$active.parent().children()
51+
return this.$items.index(this.$active)
52+
}
53+
4754
, to: function (pos) {
48-
var $active = this.$element.find('.item.active')
49-
, children = $active.parent().children()
50-
, activePos = children.index($active)
55+
var activeIndex = this.getActiveIndex()
5156
, that = this
5257

53-
if (pos > (children.length - 1) || pos < 0) return
58+
if (pos > (this.$items.length - 1) || pos < 0) return
5459

5560
if (this.sliding) {
5661
return this.$element.one('slid', function () {
5762
that.to(pos)
5863
})
5964
}
6065

61-
if (activePos == pos) {
66+
if (activeIndex == pos) {
6267
return this.pause().cycle()
6368
}
6469

65-
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
70+
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
6671
}
6772

6873
, pause: function (e) {
@@ -92,6 +97,7 @@
9297
, isCycling = this.interval
9398
, direction = type == 'next' ? 'left' : 'right'
9499
, fallback = type == 'next' ? 'first' : 'last'
100+
, $nextIndicator
95101
, that = this
96102
, e
97103

@@ -107,6 +113,14 @@
107113

108114
if ($next.hasClass('active')) return
109115

116+
if (this.$indicators.length) {
117+
this.$indicators.find('.active').removeClass('active')
118+
this.$element.one('slid', function () {
119+
$nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
120+
$nextIndicator && $nextIndicator.addClass('active')
121+
})
122+
}
123+
110124
if ($.support.transition && this.$element.hasClass('slide')) {
111125
this.$element.trigger(e)
112126
if (e.isDefaultPrevented()) return

‎docs/assets/js/bootstrap-modal.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@
6060
that.$element.appendTo(document.body) //don't move modals dom position
6161
}
6262

63-
that.$element
64-
.show()
63+
that.$element.show()
6564

6665
if (transition) {
6766
that.$element[0].offsetWidth // force reflow

‎docs/assets/js/bootstrap.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@
289289

290290
var Carousel = function (element, options) {
291291
this.$element = $(element)
292+
this.$indicators = this.$element.find('.carousel-indicators')
292293
this.options = options
293294
this.options.pause == 'hover' && this.$element
294295
.on('mouseenter', $.proxy(this.pause, this))
@@ -305,25 +306,29 @@
305306
return this
306307
}
307308

309+
, getActiveIndex: function () {
310+
this.$active = this.$element.find('.item.active')
311+
this.$items = this.$active.parent().children()
312+
return this.$items.index(this.$active)
313+
}
314+
308315
, to: function (pos) {
309-
var $active = this.$element.find('.item.active')
310-
, children = $active.parent().children()
311-
, activePos = children.index($active)
316+
var activeIndex = this.getActiveIndex()
312317
, that = this
313318

314-
if (pos > (children.length - 1) || pos < 0) return
319+
if (pos > (this.$items.length - 1) || pos < 0) return
315320

316321
if (this.sliding) {
317322
return this.$element.one('slid', function () {
318323
that.to(pos)
319324
})
320325
}
321326

322-
if (activePos == pos) {
327+
if (activeIndex == pos) {
323328
return this.pause().cycle()
324329
}
325330

326-
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
331+
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
327332
}
328333

329334
, pause: function (e) {
@@ -353,6 +358,7 @@
353358
, isCycling = this.interval
354359
, direction = type == 'next' ? 'left' : 'right'
355360
, fallback = type == 'next' ? 'first' : 'last'
361+
, $nextIndicator
356362
, that = this
357363
, e
358364

@@ -368,6 +374,14 @@
368374

369375
if ($next.hasClass('active')) return
370376

377+
if (this.$indicators.length) {
378+
this.$indicators.find('.active').removeClass('active')
379+
this.$element.one('slid', function () {
380+
$nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
381+
$nextIndicator && $nextIndicator.addClass('active')
382+
})
383+
}
384+
371385
if ($.support.transition && this.$element.hasClass('slide')) {
372386
this.$element.trigger(e)
373387
if (e.isDefaultPrevented()) return
@@ -832,8 +846,7 @@
832846
that.$element.appendTo(document.body) //don't move modals dom position
833847
}
834848

835-
that.$element
836-
.show()
849+
that.$element.show()
837850

838851
if (transition) {
839852
that.$element[0].offsetWidth // force reflow

‎docs/assets/js/bootstrap.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/javascript.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1422,6 +1422,11 @@ <h2>Example carousel</h2>
14221422
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
14231423
<div class="bs-docs-example">
14241424
<div id="myCarousel" class="carousel slide">
1425+
<ol class="carousel-indicators">
1426+
<li class="active"></li>
1427+
<li></li>
1428+
<li></li>
1429+
</ol>
14251430
<div class="carousel-inner">
14261431
<div class="item active">
14271432
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">

‎docs/templates/pages/javascript.mustache‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1352,6 +1352,11 @@ $('#myCollapsible').on('hidden', function () {
13521352
<p>{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}</p>
13531353
<div class="bs-docs-example">
13541354
<div id="myCarousel" class="carousel slide">
1355+
<ol class="carousel-indicators">
1356+
<li class="active"></li>
1357+
<li></li>
1358+
<li></li>
1359+
</ol>
13551360
<div class="carousel-inner">
13561361
<div class="item active">
13571362
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">

‎js/bootstrap-carousel.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
var Carousel = function (element, options) {
3030
this.$element = $(element)
31+
this.$indicators = this.$element.find('.carousel-indicators')
3132
this.options = options
3233
this.options.pause == 'hover' && this.$element
3334
.on('mouseenter', $.proxy(this.pause, this))
@@ -44,25 +45,29 @@
4445
return this
4546
}
4647

48+
, getActiveIndex: function () {
49+
this.$active = this.$element.find('.item.active')
50+
this.$items = this.$active.parent().children()
51+
return this.$items.index(this.$active)
52+
}
53+
4754
, to: function (pos) {
48-
var $active = this.$element.find('.item.active')
49-
, children = $active.parent().children()
50-
, activePos = children.index($active)
55+
var activeIndex = this.getActiveIndex()
5156
, that = this
5257

53-
if (pos > (children.length - 1) || pos < 0) return
58+
if (pos > (this.$items.length - 1) || pos < 0) return
5459

5560
if (this.sliding) {
5661
return this.$element.one('slid', function () {
5762
that.to(pos)
5863
})
5964
}
6065

61-
if (activePos == pos) {
66+
if (activeIndex == pos) {
6267
return this.pause().cycle()
6368
}
6469

65-
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
70+
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
6671
}
6772

6873
, pause: function (e) {
@@ -107,6 +112,14 @@
107112

108113
if ($next.hasClass('active')) return
109114

115+
if (this.$indicators.length) {
116+
this.$indicators.find('.active').removeClass('active')
117+
this.$element.one('slid', function () {
118+
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
119+
$nextIndicator && $nextIndicator.addClass('active')
120+
})
121+
}
122+
110123
if ($.support.transition && this.$element.hasClass('slide')) {
111124
this.$element.trigger(e)
112125
if (e.isDefaultPrevented()) return

‎js/bootstrap-modal.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@
6060
that.$element.appendTo(document.body) //don't move modals dom position
6161
}
6262

63-
that.$element
64-
.show()
63+
that.$element.show()
6564

6665
if (transition) {
6766
that.$element[0].offsetWidth // force reflow

0 commit comments

Comments
 (0)