fixed issue where public slide method did not work correctly

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "BootstrapColumnCarousel",
-  "version": "1.0.0",
-  "description": "Carousel that supports multiple bootstrap columns",
+  "name": "GridColumnCarousel",
+  "version": "1.1.0",
+  "description": "Carousel that supports multiple grid columns",
   "main": "gulpfile.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/anysom/BootstrapColumnCarousel.git"
+    "url": "https://github.com/anysom/GridColumnCarousel.git"
   },
   "keywords": [
     "Bootstrap",
@@ -15,9 +15,9 @@
   "author": "Anders Nysom",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/anysom/BootstrapColumnCarousel/issues"
+    "url": "https://github.com/anysom/GridColumnCarousel/issues"
   },
-  "homepage": "https://github.com/anysom/BootstrapColumnCarousel",
+  "homepage": "http://anysom.github.io/GridColumnCarousel/",
   "dependencies": {
     "browser-sync": "^1.6.5",
     "gulp": "^3.8.10",

www/css/main.css

@@ -2,7 +2,8 @@ ul {
   padding: 0;
 }
 
-/*styling to make the slides visible, but not part of the required styling*/
+/*Example styling to make the slides visible, 
+ but this IS NOT PART OF THE GridColumnCarousel styling*/
 .grid-column-carousel__list li h3 {
   background: #ccc;
   padding: 20px 0;

www/index.html

@@ -37,6 +37,12 @@ <h3>6 This is a column with a lot of text in</h3>
           </ul>
         </div>
       </div>
+
+      <!-- Button section to demonstrate the methods that can be called on the GCCarousel object -->
+      <button class="first">Go to First</button>
+      <button class="prev">Go to Prev</button>
+      <button class="next">Go to Next</button>
+      <button class="last">Go to Last</button>
     </div>
   </body>
 
@@ -47,7 +53,21 @@ <h3>6 This is a column with a lot of text in</h3>
         gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3'
       };
 
-      var gCCarousel = new GCCarousel(options);      
+      var gCCarousel = new GCCarousel(options);
+
+      /* Demonstrate the different methods that can be called on the GCCarousel object */
+      document.querySelector('button.first').addEventListener('click', function() {
+        gCCarousel.slide('first');
+      });
+      document.querySelector('button.prev').addEventListener('click', function() {
+        gCCarousel.slide('prev');
+      });
+      document.querySelector('button.next').addEventListener('click', function() {
+        gCCarousel.slide('next');
+      });
+      document.querySelector('button.last').addEventListener('click', function() {
+        gCCarousel.slide('last');
+      });
     };
   </script>
 </html>

www/js/GridColumnCarousel.js

@@ -37,6 +37,8 @@
         colItemWidth,
         slideWidth,
         currentX = 0,
+        pagesCount = 0,
+        currentPage = 0,
         self = this,
         listElem = elem.getElementsByClassName('grid-column-carousel__list')[0],   //The list element
         colItems = listElem.getElementsByTagName('li');     //A list of all the column items
@@ -79,13 +81,9 @@
 
       //Get the width of a slide
       slideWidth = elem.getBoundingClientRect().width;
-    }
-
-    function onIndicatorClick() {
-      //remove active class from old active element, and add to the clicked item
-      pageIndicatorsContainerElem.getElementsByClassName('active')[0].classList.remove('active');
-      this.classList.add('active');
-      self.slideToPage(getIndex(this));
+
+      //Calculate how many pages are necessary
+      pagesCount = Math.ceil(colItems.length / (slideWidth / colItemWidth));
     }
 
     //gets the index of an li
@@ -96,20 +94,22 @@
       }
       return i;
     }
+
+    function onIndicatorClick(e) {
+      self.slideToPage(getIndex(e.currentTarget));
+    }    
 
     //Creates the 'navigation dots'. Calculates how many items are visible pr slide,
     //and then how many navigation dots are necessary and injects them.
     function initializeDots() {
-      //Calculate how many pages are necessary
-      var pagesCount = colItems.length / (slideWidth / colItemWidth);
       //remove all items from the list add add a new list of items
       while (pageIndicatorsContainerElem.firstChild) {
           pageIndicatorsContainerElem.firstChild.removeEventListener('click', onIndicatorClick);
           pageIndicatorsContainerElem.removeChild(pageIndicatorsContainerElem.firstChild);
       }
       for (var i = 0; i < pagesCount; i++) {
         var indicator = document.createElement('li');
-        indicator.classList.add('indicator');
+        indicator.classList.add('grid-column-carousel__page-indicator');
         if(i === 0) {
           indicator.classList.add('active');
         }
@@ -148,32 +148,47 @@
     this.slide = function(direction) {
       switch (direction) {
         case 'first':
-          setX(0);
+          self.slideToPage(0);
           break;
         case 'last':
-          setX(0);
+          self.slideToPage(pagesCount - 1);
           break;
         case 'next':
-          setX(currentX -slideWidth);          
+          self.slideToPage(currentPage + 1);
           break;
         case 'prev':
-          setX(currentX +slideWidth);
+          self.slideToPage(currentPage - 1);
           break;
         default:
-          setX(0);
+          self.slideToPage(0);
           break;
       }
     };
 
     //slides to a specific page in the carousel, indicated by and number.
     //first page i index 0, and the nth page is index n.
     this.slideToPage = function(pageNumber) {
+      //ensure that pageNumber is not out of bounds
+      if(pageNumber < 0) {
+        pageNumber = 0;
+      } else if(pageNumber >= pagesCount) {
+        pageNumber = pagesCount - 1;
+      }
+
+      //toggle active class on page indicators
+      if(displayPageIndicators) {
+        pageIndicatorsContainerElem.getElementsByClassName('active')[0].classList.remove('active');
+        pageIndicatorsContainerElem.getElementsByClassName('grid-column-carousel__page-indicator')[pageNumber].classList.add('active');
+      }     
+
+      currentPage = pageNumber;
+
       //if slide to the first page, just set translateX to 0.
       if(pageNumber === 0) {
         setX(0);
         return;
       }
-      setX(pageNumber * slideWidth * -1);
+      setX(pageNumber * slideWidth * -1);      
     };
   }