Minified images and added better scroll code to the canvas

6 files changed, 6 insertions, 8 deletions

diff --git a/images/dog_and_me-min.jpg b/images/dog_and_me-min.jpg
new file mode 100644
index 0000000..984996c
--- /dev/null
+++ b/images/dog_and_me-min.jpg
diff --git a/images/friends-min.jpg b/images/friends-min.jpg
new file mode 100644
index 0000000..2f39ff6
--- /dev/null
+++ b/images/friends-min.jpg
diff --git a/images/portrait-min.jpg b/images/portrait-min.jpg
new file mode 100644
index 0000000..391267f
--- /dev/null
+++ b/images/portrait-min.jpg
diff --git a/index.css b/index.css
index 32bd838..69187fe 100644
--- a/index.css
+++ b/index.css
@@ -72,9 +72,7 @@ header > nav > ul a:hover {
 /* Carousel styling */
 #carousel {
     width: 100%;
-    height: 360px;
     position: relative;
-	overflow: hidden;
 }
 
 #carousel > button {
@@ -100,7 +98,6 @@ header > nav > ul a:hover {
 }
 
 #image_container {
-    position: absolute;
     width: 100%;
     display: flex;
     flex-direction: row;
diff --git a/index.html b/index.html
index cb90b2d..a85ca65 100644
--- a/index.html
+++ b/index.html
@@ -28,19 +28,19 @@
         <div id='carousel'>
           <div id='image_container'>
             <figure class='carousel_image'>
-              <img src='images/portrait.jpg' />
+              <img src='images/portrait-min.jpg' />
               <figcaption>
                 Me in front of my desktop, circa August 2021.
               </figcaption>
             </figure>
             <figure class='carousel_image'>
-              <img src='images/dog_and_me.jpg' />
+              <img src='images/dog_and_me-min.jpg' />
               <figcaption>
                 Hanging with my dog named Rizzy, circa May 2020.
               </figcaption>
             </figure>
             <figure class='carousel_image'>
-              <img src='images/friends.jpg' />
+              <img src='images/friends-min.jpg' />
               <figcaption>
                 Hanging with my friends, circa July 2019.
               </figcaption>
diff --git a/index.js b/index.js
index 4d29466..3397c30 100644
--- a/index.js
+++ b/index.js
@@ -36,7 +36,9 @@ function runCarousel() {
     }
 
     function updateCarousel() {
-        var children = imageContainer.children;
+        var children = imageContainer.children,
+            selectedChildPosition = -imageContainer.children[carouselPosition].offsetLeft + 240;
+        imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
         for (var i = 0; i < children.length; i++) {
             var image = children[i];
             if (i !== carouselPosition) {
@@ -52,7 +54,6 @@ function runCarousel() {
             }
         }
 
-        imageContainer.style.left = 'calc(' + (-carouselPosition * 252) + 'px + 50% - 120px)';
         rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible';
         leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible';
     }