Merge pull request bradtraversy#68 from siyi0211/master

bradtraversy · web-flow · commit 5a09308354ee · 2021-07-31T10:33:02.000-04:00
Update the transition of image
diff --git a/image-carousel/index.html b/image-carousel/index.html
@@ -9,6 +9,10 @@
   <body>
     <div class="carousel">
       <div class="image-container" id="imgs">
+        <img
+       src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"
+       alt="fourth-image"
+       />
         <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
        alt="first-image"
        />
@@ -24,6 +28,9 @@
        src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"
        alt="fourth-image"
        />
+       <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
+       alt="first-image"
+       />
       </div>
 
       <div class="buttons-container">
diff --git a/image-carousel/script.js b/image-carousel/script.js
@@ -4,7 +4,7 @@ const rightBtn = document.getElementById('right')
 
 const img = document.querySelectorAll('#imgs img')
 
-let idx = 0
+let idx = 1
 
 let interval = setInterval(run, 2000)
 
@@ -15,12 +15,34 @@ function run() {
 
 function changeImage() {
     if(idx > img.length - 1) {
-        idx = 0
-    } else if(idx < 0) {
         idx = img.length - 1
-    }
 
-    imgs.style.transform = `translateX(${-idx * 500}px)`
+        imgs.style.transition = 'all, linear, 1s';
+        imgs.style.transform = `translateX(${-idx * 500}px)`
+
+        setTimeout(function() {
+            idx = 1;  
+            imgs.style.transition = ''; 
+            imgs.style.transform = `translateX(${-500}px)`
+        },0)
+    } 
+    else if(idx < 0){
+        idx = 0
+
+        imgs.style.transition = 'all, linear, 1s';
+        imgs.style.transform = `translateX(${-idx * 500}px)`
+
+        setTimeout(function() {
+            idx = img.length - 2;  
+            imgs.style.transition = ''; 
+            imgs.style.transform = `translateX(${-idx * 500}px)`
+        },0)
+    }
+    else{
+        imgs.style.transition = 'all, linear, 1s';
+        imgs.style.transform = `translateX(${-idx * 500}px)`
+    }
+    
 }
 
 function resetInterval() {
diff --git a/image-carousel/style.css b/image-carousel/style.css
@@ -28,8 +28,7 @@ img {
 
 .image-container {
   display: flex;
-  transform: translateX(0);
-  transition: transform 0.5s ease-in-out;
+  transform: translateX(-500px);
 }
 
 .buttons-container {

Original file line number	Diff line number	Diff line change
`@@ -28,8 +28,7 @@ img {`
`28`	`28`
`29`	`29`	`.image-container {`
`30`	`30`	`display: flex;`
`31`		`- transform: translateX(0);`
`32`		`- transition: transform 0.5s ease-in-out;`
	`31`	`+ transform: translateX(-500px);`
`33`	`32`	`}`
`34`	`33`
`35`	`34`	`.buttons-container {`