diff options
| author | Mark Otto <[email protected]> | 2017-05-26 22:28:09 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-26 22:28:09 -0700 |
| commit | 6c3f833076a9fa68601741e3e21bd07ad79b7d8a (patch) | |
| tree | fe016946d77f9ffff15bbe9cdc593fd098b5bcc7 /js/tests/visual/carousel.html | |
| parent | c581564a780974c6430ac5897740006f623f2277 (diff) | |
| parent | 5d7db507396275fcda96935aff47b09e1d79ddc1 (diff) | |
| download | bootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.tar.xz bootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.zip | |
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
Diffstat (limited to 'js/tests/visual/carousel.html')
| -rw-r--r-- | js/tests/visual/carousel.html | 114 |
1 files changed, 67 insertions, 47 deletions
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 859ff7504..b26fb4a0d 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -1,57 +1,77 @@ <!DOCTYPE html> <html> -<head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Carousel</title> - <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> -</head> -<body> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> + <title>Carousel</title> + </head> + <body> + <div class="container"> + <h1>Carousel <small>Bootstrap Visual Test</small></h1> -<div class="container"> + <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> - <h1>Carousel <small>Bootstrap Visual Test</small></h1> - <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> - <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> - <ol class="carousel-indicators"> - <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> - <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> - <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> - </ol> - <div class="carousel-inner"> - <div class="carousel-item active"> - <img alt="First slide" src="https://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg"> - </div> - <div class="carousel-item"> - <img alt="Second slide" src="https://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg"> - </div> - <div class="carousel-item"> - <img alt="Third slide" src="https://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg"> + <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> + <ol class="carousel-indicators"> + <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> + <li data-target="#carousel-example-generic" data-slide-to="1"></li> + <li data-target="#carousel-example-generic" data-slide-to="2"></li> + </ol> + <div class="carousel-inner" role="listbox"> + <div class="carousel-item active"> + <img src="https://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg" alt="First slide"> + </div> + <div class="carousel-item"> + <img src="https://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg" alt="Second slide"> + </div> + <div class="carousel-item"> + <img src="https://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg" alt="Third slide"> + </div> + </div> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> + <span class="icon-prev" aria-hidden="true"></span> + <span class="sr-only">Previous</span> + </a> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> + <span class="icon-next" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a> </div> </div> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> - </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> - </a> - </div> -</div> + <script src="../vendor/jquery.min.js"></script> + <script src="../../dist/util.js"></script> + <script src="../../dist/carousel.js"></script> -<!-- JavaScript Includes --> -<script src="../vendor/jquery.min.js"></script> -<script src="../../dist/util.js"></script> -<script src="../../dist/carousel.js"></script> -<script> - $(function () { - // Test to show that the carousel doesn't slide when the current tab isn't visible - $('#carousel-example-generic').on('slid.bs.carousel', function (event) { - console.log('slid at ', event.timeStamp); - }) - }); -</script> + <script> + // Should throw an error because carousel is in transition + function testCarouselTransitionError() { + var err = false + var $carousel = $('#carousel-example-generic') + $carousel.on('slid.bs.carousel', function () { + $carousel.off('slid.bs.carousel') + if (!err) { + alert('No error thrown for : testCarouselTransitionError') + } + }) + try { + $carousel.carousel('next').carousel('prev') + } + catch (e) { + err = true + console.error(e.message) + } + } -</body> + $(function () { + // Test to show that the carousel doesn't slide when the current tab isn't visible + $('#carousel-example-generic').on('slid.bs.carousel', function (event) { + console.log('slid at ', event.timeStamp) + }) + testCarouselTransitionError() + }) + </script> + </body> </html> |