Chaper 4 Carousel JavaScript.

chapter4/10carousel.html

@@ -70,8 +70,38 @@
 <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 <script src="../js/jquery-1.11.2.min.js"></script>
 <script src="../js/bootstrap.js"></script>
-
 <script type="text/javascript">
+  var options = {
+    interval: 1000,
+    // Stop sliding on hover. Default: no
+    pause: "hover",
+    // Continue to first after last
+    wrap: false
+  }
+
+  function getImage(j) {
+    var ret;
+
+    ret = $(j).find('.item.active').children('img')[0].getAttribute('src');
+    return ret;
+  }
+
+  /* Or carousel(command) where command in:
+     - cycle : enable cycling
+     - pause cycling
+     - <number> time duration between slides
+     - prev change to previous slide
+     - next change to next slide
+    */
+  $('#bestCarsCarousel').carousel(options);
+
+  $('#bestCarsCarousel').on('slide.bs.carousel', function() {
+    console.log("Sliding out", getImage(this));
+  });
+  $('#bestCarsCarousel').on('slid.bs.carousel', function() {
+    var src = getImage(this);
+    console.log("Slid in", getImage(this));
+  });
 </script>
 </body>
 </html>