Insert buttons for carousel

js/carousel.js

@@ -9,6 +9,8 @@
     numVisible: 5, // Number of visible items in carousel
     fullWidth: false, // Change to full width styles
     indicators: false, // Toggle indicators
+    buttonLeft: false, // Toggle left button
+    buttonRight: false, // Toggle right button
     noWrap: false, // Don't wrap around and cycle through items.
     onCycleTo: null // Callback for when a new slide is cycled to.
   };
@@ -39,6 +41,8 @@
        * @prop {Number} numVisible
        * @prop {Boolean} fullWidth
        * @prop {Boolean} indicators
+       * @prop {Boolean} buttonLeft
+       * @prop {Boolean} buttonRight
        * @prop {Boolean} noWrap
        * @prop {Function} onCycleTo
        */
@@ -47,6 +51,8 @@
       // Setup
       this.hasMultipleSlides = this.$el.find('.carousel-item').length > 1;
       this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+      this.showLeftButton = this.options.buttonLeft;
+      this.showRightButton = this.options.buttonRight;
       this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
       this.pressed = false;
       this.dragged = false;
@@ -74,7 +80,7 @@
           this.$el.find('.carousel-fixed-item').addClass('with-indicators');
         }
       }
-
+      
       // Iterate through slides
       this.$indicators = $('<ul class="indicators"></ul>');
       this.$el.find('.carousel-item').each((el, i) => {
@@ -95,6 +101,38 @@
       }
       this.count = this.images.length;
 
+      //Button left pressed action
+      this.$buttonLeft = $('<a class="buttonLeft"></a>');
+      this.$el.find('.carousel-item').each((el, i) => {
+        this.$buttonLeft.push(el);
+        if (this.showIndicators) {
+          let $indicator = $('<li class="indicator-item"></li>');
+
+          // Add active to first by default.
+          if (i === 0) {
+            $indicator[0].classList.add('active');
+          }
+
+          this.$indicators.append($indicator);
+        }
+      });
+
+      //Button right pressed action
+      this.$buttonRight = $('<a class="buttonRight"></a>');
+      this.$el.find('.carousel-item').each((el, i) => {
+        this.$buttonRight.push(el);
+        if (this.showIndicators) {
+          let $indicator = $('<li class="indicator-item"></li>');
+
+          // Add active to first by default.
+          if (i === 0) {
+            $indicator[0].classList.add('active');
+          }
+
+          this.$indicators.append($indicator);
+        }
+      });
+
       // Cap numVisible at count
       this.options.numVisible = Math.min(this.count, this.options.numVisible);
 
@@ -158,6 +196,20 @@
       this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
       this.el.addEventListener('click', this._handleCarouselClickBound);
 
+      if (this.buttonRight) {
+        this._handleButtonRightClickBound = this._handleButtonRightClick.bind(this);
+        this.$buttonRight.find('.button-right').each((el, i) => {
+          el.addEventListener('click', this._handleButtonRightClickBound);
+        });
+      }
+
+      if (this.buttonLeft) {
+        this._handleButtonLeftClickBound = this._handleButtonLeftClick.bind(this);
+        this.$buttonLeft.find('.button-left').each((el, i) => {
+          el.addEventListener('click', this._handleButtonLeftClickBound);
+        });
+      }
+
       if (this.showIndicators && this.$indicators) {
         this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
         this.$indicators.find('.indicator-item').each((el, i) => {
@@ -193,6 +245,14 @@
         });
       }
 
+      if(this.buttonLeft){
+        this.el.removeEventListener('click', this._handleButtonLeftClickBound);
+      }
+
+      if(this.buttonRight){
+        this.el.removeEventListener('click', this._handleButtonRightClickBound);
+      }
+
       window.removeEventListener('resize', this._handleThrottledResizeBound);
     }
 

sass/components/_carousel.scss

@@ -56,6 +56,20 @@
     }
   }
 
+  .carousel-item-rounded {
+    visibility: hidden;
+    width: $carousel-item-width;
+    height: $carousel-item-height;
+    position: absolute;
+    border-radius: 100%;
+    top: 0;
+    left: 0;
+
+    & > img {
+      width: 100%;
+    }
+  }
+
   .indicators {
     position: absolute;
     text-align: center;
@@ -82,6 +96,26 @@
     }
   }
 
+  .buttonLeft {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    height: 30px;
+    width: 20px;
+    margin: 20px;
+  }
+
+  .buttonRight {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    height: 30px;
+    width: 20px;
+    margin: 20px;
+  }
+
   // Materialbox compatibility
   &.scrolling .carousel-item .materialboxed,
   .carousel-item:not(.active) .materialboxed {

test/html/carousel.html

@@ -55,9 +55,14 @@ <h3>Full Width Carousels in tabs</h3>
         <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
       </div>
     </div>
-
-
-
+    <div class="carousel ">
+      <a class="buttonLeft"></a>
+      <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
+      <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
+      <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
+      <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
+      <a class="buttonRight"></a>
+    </div>
 
     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script src="../../../bin/materialize.js"></script>
@@ -81,7 +86,8 @@ <h3>Full Width Carousels in tabs</h3>
 
       $('.carousel').carousel();
       $('.carousel.carousel-slider').carousel({fullWidth : true});
-
+      $('.carousel.buttonLeft').carousel({fullWidth : true});
+      $('.carousel.buttonRight').carousel({fullWidth : true});
     });