diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js
index aae952e..4ccfabc 100644
--- a/src/react-elastic-carousel/components/Carousel.js
+++ b/src/react-elastic-carousel/components/Carousel.js
@@ -737,6 +737,7 @@ class Carousel extends React.Component {
       className,
       style,
       itemsToShow,
+      itemsToScroll,
       verticalMode,
       isRTL,
       easing,
@@ -816,6 +817,7 @@ class Carousel extends React.Component {
                 currentItem={activeIndex}
                 autoTabIndexVisibleItems={autoTabIndexVisibleItems}
                 itemsToShow={itemsToShow}
+                itemsToScroll={itemsToScroll}
                 itemPosition={itemPosition}
                 itemPadding={itemPadding}
                 enableSwipe={enableSwipe}
diff --git a/src/react-elastic-carousel/components/Track.js b/src/react-elastic-carousel/components/Track.js
index e34fe9c..8d8e7b4 100644
--- a/src/react-elastic-carousel/components/Track.js
+++ b/src/react-elastic-carousel/components/Track.js
@@ -12,6 +12,7 @@ const Track = ({
   enableMouseSwipe,
   preventDefaultTouchmoveEvent,
   itemsToShow,
+  itemsToScroll,
   currentItem,
   itemPosition,
   itemPadding,
@@ -22,17 +23,31 @@ const Track = ({
 }) => {
   const width = `${childWidth}px`;
   const paddingStyle = `${itemPadding.join("px ")}px`;
+  const minVisibleItem = currentItem;
+  const maxVisibleItem = currentItem + itemsToShow;
+  const prevItem = minVisibleItem - itemsToScroll;
+  const nextItem = maxVisibleItem + itemsToScroll;
+
   const originalChildren = React.Children.map(children, (child, idx) => {
-    const min = currentItem;
-    const max = currentItem + itemsToShow;
-    const isVisible = idx >= min && idx < max;
+    const isVisible = idx >= minVisibleItem && idx < maxVisibleItem;
+    const isPrevItem = !isVisible && idx >= prevItem && idx < currentItem;
+    const isNextItem = !isVisible && idx < nextItem && idx > currentItem;
+    const itemClass = "carousel-item";
+
     const childToRender = autoTabIndexVisibleItems
-      ? React.cloneElement(child, { tabIndex: isVisible ? 0 : -1 })
+      ? React.cloneElement(child, {
+          tabIndex: isVisible ? 0 : -1
+        })
       : child;
     return (
       <div
-        className={cssPrefix("carousel-item", `carousel-item-${idx}`)}
-        // tabIndex={isVisible ? 0 : -1}
+        className={cssPrefix(
+          itemClass,
+          `${itemClass}-${idx}`,
+          `${itemClass}-${isVisible ? "visible" : "hidden"}`,
+          isPrevItem && `${itemClass}-prev`,
+          isNextItem && `${itemClass}-next`
+        )}
       >
         <ItemWrapperContainer
           id={idx}
diff --git a/src/react-elastic-carousel/utils/helpers.js b/src/react-elastic-carousel/utils/helpers.js
index 18a1600..e106a2e 100644
--- a/src/react-elastic-carousel/utils/helpers.js
+++ b/src/react-elastic-carousel/utils/helpers.js
@@ -9,7 +9,9 @@ export const cssPrefix = (...classNames) => {
 
   // in case of an array we add the class prefix per item;
   const chainedClasses = classNames.reduce((acc, current) => {
-    acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    if (current) {
+      acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    }
     return acc;
   }, "");
   result += chainedClasses;