kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

rename .item => .carousel-item

Browse source
This commit is contained in:
Chris Rebert 2014-12-17 18:30:16 -08:00
parent 90f4767d06
commit c7ef5810e1
7 changed files with 96 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/examples/carousel/carousel.css
View file

@ -21,11 +21,11 @@ body {
} }
/* Declare heights because of positioning of img element */ /* Declare heights because of positioning of img element */
.carousel .item { .carousel-item {
height: 32rem; height: 32rem;
background-color: #777; background-color: #777;
} }
.carousel-inner > .item > img { .carousel-item > img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

6
docs/examples/carousel/index.html
View file

@ -50,7 +50,7 @@
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="carousel-item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-left"> <div class="carousel-caption text-left">
@ -60,7 +60,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
@ -70,7 +70,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-right"> <div class="carousel-caption text-right">

16
docs/javascript/carousel.md
View file

@ -15,13 +15,13 @@ A slideshow component for cycling through elements—images or slides of text—
<li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div> </div>
<div class="item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide"> <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div> </div>
<div class="item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div> </div>
</div> </div>
@ -48,7 +48,7 @@ A slideshow component for cycling through elements—images or slides of text—
### Optional captions ### Optional captions
Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted. Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
<div class="bs-example"> <div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
@ -58,21 +58,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
<li data-target="#carousel-example-captions" data-slide-to="2"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>First slide label</h3> <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image"> <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Second slide label</h3> <h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image"> <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Third slide label</h3> <h3>Third slide label</h3>
@ -92,7 +92,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div> </div>
{% highlight html %} {% highlight html %}
<div class="item"> <div class="carousel-item">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>...</h3> <h3>...</h3>

6
js/carousel.js
View file

@ -65,7 +65,7 @@
} }
Carousel.prototype.getItemIndex = function (item) { Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item') this.$items = item.parent().children('.carousel-item')
return this.$items.index(item || this.$active) return this.$items.index(item || this.$active)
} }
@ -81,7 +81,7 @@
Carousel.prototype.to = function (pos) { Carousel.prototype.to = function (pos) {
var that = this var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) var activeIndex = this.getItemIndex(this.$active = this.$element.find('.carousel-item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return if (pos > (this.$items.length - 1) || pos < 0) return
@ -115,7 +115,7 @@
} }
Carousel.prototype.slide = function (type, next) { Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active') var $active = this.$element.find('.carousel-item.active')
var $next = next || this.getItemForDirection(type, $active) var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right' var direction = type == 'next' ? 'left' : 'right'

152
js/tests/unit/carousel.js
View file

@ -51,13 +51,13 @@ $(function () {
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>' + '</ol>'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -71,16 +71,16 @@ $(function () {
.one('slide.bs.carousel', function (e) { .one('slide.bs.carousel', function (e) {
e.preventDefault() e.preventDefault()
setTimeout(function () { setTimeout(function () {
ok($carousel.find('.item:eq(0)').is('.active'), 'first item still active') ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
$carousel.bootstrapCarousel('next') $carousel.bootstrapCarousel('next')
}, 0) }, 0)
}) })
.one('slid.bs.carousel', function () { .one('slid.bs.carousel', function () {
setTimeout(function () { setTimeout(function () {
ok(!$carousel.find('.item:eq(0)').is('.active'), 'first item still active') ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
ok($carousel.find('.item:eq(1)').is('.active'), 'second item active') ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active') ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
start() start()
}, 0) }, 0)
@ -91,7 +91,7 @@ $(function () {
test('should fire slide event with direction', function () { test('should fire slide event with direction', function () {
var carouselHTML = '<div id="myCarousel" class="carousel slide">' var carouselHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>First Thumbnail label</h4>' + '<h4>First Thumbnail label</h4>'
@ -100,7 +100,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Second Thumbnail label</h4>' + '<h4>Second Thumbnail label</h4>'
@ -109,7 +109,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Third Thumbnail label</h4>' + '<h4>Third Thumbnail label</h4>'
@ -145,7 +145,7 @@ $(function () {
test('should fire slid event with direction', function () { test('should fire slid event with direction', function () {
var carouselHTML = '<div id="myCarousel" class="carousel slide">' var carouselHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>First Thumbnail label</h4>' + '<h4>First Thumbnail label</h4>'
@ -154,7 +154,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Second Thumbnail label</h4>' + '<h4>Second Thumbnail label</h4>'
@ -163,7 +163,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Third Thumbnail label</h4>' + '<h4>Third Thumbnail label</h4>'
@ -199,7 +199,7 @@ $(function () {
test('should fire slide event with relatedTarget', function () { test('should fire slide event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide">' var template = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>First Thumbnail label</h4>' + '<h4>First Thumbnail label</h4>'
@ -208,7 +208,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Second Thumbnail label</h4>' + '<h4>Second Thumbnail label</h4>'
@ -217,7 +217,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Third Thumbnail label</h4>' + '<h4>Third Thumbnail label</h4>'
@ -236,7 +236,7 @@ $(function () {
$(template) $(template)
.on('slide.bs.carousel', function (e) { .on('slide.bs.carousel', function (e) {
ok(e.relatedTarget, 'relatedTarget present') ok(e.relatedTarget, 'relatedTarget present')
ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"') ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
start() start()
}) })
.bootstrapCarousel('next') .bootstrapCarousel('next')
@ -245,7 +245,7 @@ $(function () {
test('should fire slid event with relatedTarget', function () { test('should fire slid event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide">' var template = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>First Thumbnail label</h4>' + '<h4>First Thumbnail label</h4>'
@ -254,7 +254,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Second Thumbnail label</h4>' + '<h4>Second Thumbnail label</h4>'
@ -263,7 +263,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Third Thumbnail label</h4>' + '<h4>Third Thumbnail label</h4>'
@ -282,7 +282,7 @@ $(function () {
$(template) $(template)
.on('slid.bs.carousel', function (e) { .on('slid.bs.carousel', function (e) {
ok(e.relatedTarget, 'relatedTarget present') ok(e.relatedTarget, 'relatedTarget present')
ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"') ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
start() start()
}) })
.bootstrapCarousel('next') .bootstrapCarousel('next')
@ -291,7 +291,7 @@ $(function () {
test('should set interval from data attribute', function () { test('should set interval from data attribute', function () {
var templateHTML = '<div id="myCarousel" class="carousel slide">' var templateHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>First Thumbnail label</h4>' + '<h4>First Thumbnail label</h4>'
@ -300,7 +300,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Second Thumbnail label</h4>' + '<h4>Second Thumbnail label</h4>'
@ -309,7 +309,7 @@ $(function () {
+ 'ultricies vehicula ut id elit.</p>' + 'ultricies vehicula ut id elit.</p>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '<div class="carousel-caption">' + '<div class="carousel-caption">'
+ '<h4>Third Thumbnail label</h4>' + '<h4>Third Thumbnail label</h4>'
@ -352,14 +352,14 @@ $(function () {
test('should skip over non-items when using item indices', function () { test('should skip over non-items when using item indices', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<script type="text/x-metamorph" id="thingy"/>' + '<script type="text/x-metamorph" id="thingy"/>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -367,24 +367,24 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel(1) $template.bootstrapCarousel(1)
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
}) })
test('should skip over non-items when using next/prev methods', function () { test('should skip over non-items when using next/prev methods', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<script type="text/x-metamorph" id="thingy"/>' + '<script type="text/x-metamorph" id="thingy"/>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div class="item">' + '<div class="carousel-item">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -392,23 +392,23 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel('next') $template.bootstrapCarousel('next')
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
}) })
test('should go to previous item if left arrow key is pressed', function () { test('should go to previous item if left arrow key is pressed', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div id="first" class="item">' + '<div id="first" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="second" class="item active">' + '<div id="second" class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="third" class="item">' + '<div id="third" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -417,23 +417,23 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
$template.trigger($.Event('keydown', { which: 37 })) $template.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
}) })
test('should go to next item if right arrow key is pressed', function () { test('should go to next item if right arrow key is pressed', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div id="first" class="item active">' + '<div id="first" class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="second" class="item">' + '<div id="second" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="third" class="item">' + '<div id="third" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -442,23 +442,23 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 })) $template.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
}) })
test('should support disabling the keyboard navigation', function () { test('should support disabling the keyboard navigation', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div id="first" class="item active">' + '<div id="first" class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="second" class="item">' + '<div id="second" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="third" class="item">' + '<div id="third" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -467,29 +467,29 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 })) $template.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
$template.trigger($.Event('keydown', { which: 37 })) $template.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
}) })
test('should ignore keyboard events within <input>s and <textarea>s', function () { test('should ignore keyboard events within <input>s and <textarea>s', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div id="first" class="item active">' + '<div id="first" class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '<input type="text" id="in-put">' + '<input type="text" id="in-put">'
+ '<textarea id="text-area"></textarea>' + '<textarea id="text-area"></textarea>'
+ '</div>' + '</div>'
+ '<div id="second" class="item">' + '<div id="second" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="third" class="item">' + '<div id="third" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -503,34 +503,34 @@ $(function () {
$template.bootstrapCarousel() $template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$input.trigger($.Event('keydown', { which: 39 })) $input.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
$input.trigger($.Event('keydown', { which: 37 })) $input.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
$textarea.trigger($.Event('keydown', { which: 39 })) $textarea.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
$textarea.trigger($.Event('keydown', { which: 37 })) $textarea.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>') strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
}) })
test('should only add mouseenter and mouseleave listeners when not on mobile', function () { test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
var isMobile = 'ontouchstart' in document.documentElement var isMobile = 'ontouchstart' in document.documentElement
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div id="first" class="item active">' + '<div id="first" class="carousel-item active">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="second" class="item">' + '<div id="second" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '<div id="third" class="item">' + '<div id="third" class="carousel-item">'
+ '<img alt="">' + '<img alt="">'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -550,13 +550,13 @@ $(function () {
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>' + '</ol>'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active" id="one">' + '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="two">' + '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="three">' + '<div class="carousel-item" id="three">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -564,7 +564,7 @@ $(function () {
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>' + '</div>'
var $carousel = $(carouselHTML) var $carousel = $(carouselHTML)
var getActiveId = function () { return $carousel.find('.item.active').attr('id') } var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
stop() stop()
@ -594,13 +594,13 @@ $(function () {
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>' + '</ol>'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active" id="one">' + '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="two">' + '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="three">' + '<div class="carousel-item" id="three">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -613,7 +613,7 @@ $(function () {
$carousel $carousel
.on('slid.bs.carousel', function () { .on('slid.bs.carousel', function () {
strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide') strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
start() start()
}) })
.bootstrapCarousel('prev') .bootstrapCarousel('prev')
@ -627,13 +627,13 @@ $(function () {
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>' + '</ol>'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active" id="one">' + '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="two">' + '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="three">' + '<div class="carousel-item" id="three">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -641,7 +641,7 @@ $(function () {
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>' + '</div>'
var $carousel = $(carouselHTML) var $carousel = $(carouselHTML)
var getActiveId = function () { return $carousel.find('.item.active').attr('id') } var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
stop() stop()
@ -672,13 +672,13 @@ $(function () {
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>' + '</ol>'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active" id="one">' + '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="two">' + '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '<div class="item" id="three">' + '<div class="carousel-item" id="three">'
+ '<div class="carousel-caption"/>' + '<div class="carousel-caption"/>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
@ -692,6 +692,6 @@ $(function () {
ok(false, 'carousel slid when it should not have slid') ok(false, 'carousel slid when it should not have slid')
}) })
.bootstrapCarousel('prev') .bootstrapCarousel('prev')
strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide') strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
}) })
}) })

6
js/tests/visual/carousel.html
View file

@ -22,13 +22,13 @@
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="carousel-item active">
<img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg"> <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
</div> </div>
<div class="item"> <div class="carousel-item">
<img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg"> <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
</div> </div>
<div class="item"> <div class="carousel-item">
<img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg"> <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
</div> </div>
</div> </div>

2
scss/_carousel.scss
View file

@ -13,7 +13,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
> .item { > .carousel-item {
position: relative; position: relative;
display: none; display: none;
transition: .6s ease-in-out left; transition: .6s ease-in-out left;