diff --git a/js/src/carousel.js b/js/src/carousel.js
index b7f3b3a7a9..f987fc186b 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -45,7 +45,9 @@ const Carousel = (($) => {
 
   const Direction = {
     NEXT     : 'next',
-    PREVIOUS : 'prev'
+    PREVIOUS : 'prev',
+    LEFT     : 'left',
+    RIGHT    : 'right'
   }
 
   const Event = {
@@ -62,8 +64,10 @@ const Carousel = (($) => {
     CAROUSEL : 'carousel',
     ACTIVE   : 'active',
     SLIDE    : 'slide',
-    RIGHT    : 'right',
-    LEFT     : 'left',
+    RIGHT    : 'carousel-item-right',
+    LEFT     : 'carousel-item-left',
+    NEXT     : 'carousel-item-next',
+    PREVIOUS : 'carousel-item-prev',
     ITEM     : 'carousel-item'
   }
 
@@ -71,7 +75,7 @@ const Carousel = (($) => {
     ACTIVE      : '.active',
     ACTIVE_ITEM : '.active.carousel-item',
     ITEM        : '.carousel-item',
-    NEXT_PREV   : '.next, .prev',
+    NEXT_PREV   : '.carousel-item-next, .carousel-item-prev',
     INDICATORS  : '.carousel-indicators',
     DATA_SLIDE  : '[data-slide], [data-slide-to]',
     DATA_RIDE   : '[data-ride="carousel"]'
@@ -275,10 +279,10 @@ const Carousel = (($) => {
     }
 
 
-    _triggerSlideEvent(relatedTarget, directionalClassname) {
+    _triggerSlideEvent(relatedTarget, eventDirectionName) {
       const slideEvent = $.Event(Event.SLIDE, {
         relatedTarget,
-        direction: directionalClassname
+        direction: eventDirectionName
       })
 
       $(this._element).trigger(slideEvent)
@@ -309,16 +313,30 @@ const Carousel = (($) => {
 
       const isCycling = Boolean(this._interval)
 
-      const directionalClassName = direction === Direction.NEXT ?
-        ClassName.LEFT :
-        ClassName.RIGHT
+      let directionalClassName
+      let orderClassName
+      let eventDirectionName
+
+      if (direction === Direction.NEXT) {
+        directionalClassName = ClassName.LEFT
+        orderClassName = ClassName.NEXT
+        eventDirectionName = Direction.LEFT
+      } else {
+        directionalClassName = ClassName.RIGHT
+        orderClassName = ClassName.PREV
+        eventDirectionName = Direction.RIGHT
+      }
+
+      // const directionalClassName = direction === Direction.NEXT ?
+      //   ClassName.LEFT :
+      //   ClassName.RIGHT
 
       if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
         this._isSliding = false
         return
       }
 
-      const slideEvent = this._triggerSlideEvent(nextElement, directionalClassName)
+      const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
       if (slideEvent.isDefaultPrevented()) {
         return
       }
@@ -338,13 +356,13 @@ const Carousel = (($) => {
 
       const slidEvent = $.Event(Event.SLID, {
         relatedTarget: nextElement,
-        direction: directionalClassName
+        direction: eventDirectionName
       })
 
       if (Util.supportsTransitionEnd() &&
         $(this._element).hasClass(ClassName.SLIDE)) {
 
-        $(nextElement).addClass(direction)
+        $(nextElement).addClass(orderClassName)
 
         Util.reflow(nextElement)
 
@@ -355,13 +373,13 @@ const Carousel = (($) => {
           .one(Util.TRANSITION_END, () => {
             $(nextElement)
               .removeClass(directionalClassName)
-              .removeClass(direction)
+              .removeClass(orderClassName)
 
             $(nextElement).addClass(ClassName.ACTIVE)
 
             $(activeElement)
               .removeClass(ClassName.ACTIVE)
-              .removeClass(direction)
+              .removeClass(orderClassName)
               .removeClass(directionalClassName)
 
             this._isSliding = false