src/scss/bootstrap-4.0.0-alpha.6/js/tests/visual/carousel.html

   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>