]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
4 | <meta charset="utf-8"> | |
5 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
6 | <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> | |
7 | <title>Carousel</title> | |
8 | </head> | |
9 | <body> | |
10 | <div class="container"> | |
11 | <h1>Carousel <small>Bootstrap Visual Test</small></h1> | |
12 | ||
13 | <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> | |
14 | ||
15 | <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
16 | <ol class="carousel-indicators"> | |
17 | <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
18 | <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
19 | <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
20 | </ol> | |
21 | <div class="carousel-inner" role="listbox"> | |
22 | <div class="carousel-item active"> | |
23 | <img src="https://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg" alt="First slide"> | |
24 | </div> | |
25 | <div class="carousel-item"> | |
26 | <img src="https://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg" alt="Second slide"> | |
27 | </div> | |
28 | <div class="carousel-item"> | |
29 | <img src="https://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg" alt="Third slide"> | |
30 | </div> | |
31 | </div> | |
32 | <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev"> | |
33 | <span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
34 | <span class="sr-only">Previous</span> | |
35 | </a> | |
36 | <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"> | |
37 | <span class="carousel-control-next-icon" aria-hidden="true"></span> | |
38 | <span class="sr-only">Next</span> | |
39 | </a> | |
40 | </div> | |
41 | </div> | |
42 | ||
43 | <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script> | |
44 | <script src="../../dist/util.js"></script> | |
45 | <script src="../../dist/carousel.js"></script> | |
46 | ||
47 | <script> | |
48 | // Should throw an error because carousel is in transition | |
49 | function testCarouselTransitionError() { | |
50 | var err = false | |
51 | var $carousel = $('#carousel-example-generic') | |
52 | $carousel.on('slid.bs.carousel', function () { | |
53 | $carousel.off('slid.bs.carousel') | |
54 | if (!err) { | |
55 | alert('No error thrown for : testCarouselTransitionError') | |
56 | } | |
57 | }) | |
58 | try { | |
59 | $carousel.carousel('next').carousel('prev') | |
60 | } | |
61 | catch (e) { | |
62 | err = true | |
63 | console.error(e.message) | |
64 | } | |
65 | } | |
66 | ||
67 | $(function () { | |
68 | // Test to show that the carousel doesn't slide when the current tab isn't visible | |
69 | $('#carousel-example-generic').on('slid.bs.carousel', function (event) { | |
70 | console.log('slid at ', event.timeStamp) | |
71 | }) | |
72 | testCarouselTransitionError() | |
73 | }) | |
74 | </script> | |
75 | </body> | |
76 | </html> |