and pause on hover option to carousel

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 536db0ebfc5a10f7324aa3c967308445f1e17c5b..fd5b621d78c95b04bfc45324f46ddf9ec6f3b918 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js
index aef98fb05aa9eca392ee892f10302a7a1a6538de..e0091a7d0a644adcc96e34986d816213ca397806 100644 (file)
--- a/docs/assets/js/bootstrap-carousel.js
+++ b/docs/assets/js/bootstrap-carousel.js
@@ -29,6 +29,9 @@
     this.$element = $(element)
     this.options = $.extend({}, $.fn.carousel.defaults, options)
     this.options.slide && this.slide(this.options.slide)
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter', $.proxy(this.pause, this))
+      .on('mouseleave', $.proxy(this.cycle, this))
   }
 
   Carousel.prototype = {
@@ -136,6 +139,7 @@
 
   $.fn.carousel.defaults = {
     interval: 5000
+  , pause: 'hover'
   }
 
   $.fn.carousel.Constructor = Carousel

diff --git a/docs/javascript.html b/docs/javascript.html
index 3d0f8ff07c6daaa008fe134beaffba8cba456368..3d99199a723aa0490189f91488ac4749747b94aa 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1310,6 +1310,12 @@ $('#myCollapsible').on('hidden', function () {
                <td>5000</td>
                <td>The amount of time to delay between automatically cycling an item.</td>
              </tr>
+             <tr>
+               <td>pause</td>
+               <td>string</td>
+               <td>"hover"</td>
+               <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
+             </tr>
             </tbody>
           </table>
           <h3>Markup</h3>

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 618373b8bba907630faa6e694786b4cd6a490e43..b12ad5ec9a6efbbbc93f7d71ce2131ddd24f5ed7 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1234,6 +1234,12 @@ $('#myCollapsible').on('hidden', function () {
                <td>5000</td>
                <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td>
              </tr>
+             <tr>
+               <td>{{_i}}pause{{/i}}</td>
+               <td>{{_i}}string{{/i}}</td>
+               <td>"hover"</td>
+               <td>{{_i}}Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.{{/i}}</td>
+             </tr>
             </tbody>
           </table>
           <h3>{{_i}}Markup{{/i}}</h3>

diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index aef98fb05aa9eca392ee892f10302a7a1a6538de..e0091a7d0a644adcc96e34986d816213ca397806 100644 (file)
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -29,6 +29,9 @@
     this.$element = $(element)
     this.options = $.extend({}, $.fn.carousel.defaults, options)
     this.options.slide && this.slide(this.options.slide)
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter', $.proxy(this.pause, this))
+      .on('mouseleave', $.proxy(this.cycle, this))
   }
 
   Carousel.prototype = {
@@ -136,6 +139,7 @@
 
   $.fn.carousel.defaults = {
     interval: 5000
+  , pause: 'hover'
   }
 
   $.fn.carousel.Constructor = Carousel