and pause on hover option to carousel

5 files changed, 20 insertions, 0 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 536db0ebf..fd5b621d7 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js
index aef98fb05..e0091a7d0 100644
--- 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 3d0f8ff07..3d99199a7 100644
--- 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 618373b8b..b12ad5ec9 100644
--- 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 aef98fb05..e0091a7d0 100644
--- 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