Fixed the carousel

2 files changed, 5 insertions, 4 deletions

diff --git a/index.css b/index.css
index 69187fe..1d95d04 100644
--- a/index.css
+++ b/index.css
@@ -98,16 +98,16 @@ header > nav > ul a:hover {
 }
 
 #image_container {
-    width: 100%;
+    padding-left: calc(50% - 120px);
     display: flex;
     flex-direction: row;
     height: 100%;
-    transition: left 200ms linear;
+    transition: transform 100ms linear;
 }
 
 .carousel_image {
     width: 240px;
-    transition: opacity 200ms linear;
+    transition: opacity 100ms linear;
     padding: 0;
     margin: 0;
     padding-right: 12px;
diff --git a/index.js b/index.js
index 3397c30..72fcc2e 100644
--- a/index.js
+++ b/index.js
@@ -37,7 +37,8 @@ function runCarousel() {
 
     function updateCarousel() {
         var children = imageContainer.children,
-            selectedChildPosition = -imageContainer.children[carouselPosition].offsetLeft + 240;
+            numChildren = imageContainer.children.length,
+            selectedChildPosition = -(carouselPosition * 240);
         imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
         for (var i = 0; i < children.length; i++) {
             var image = children[i];