Colocando debounce e dimensionamento

css/style.css

@@ -21,9 +21,24 @@ img {
   display: flex;
 }
 
+.slide:hover {
+  will-change: transform;
+}
+
 .slide li {
   flex-shrink: 0;
   width: 80vw;
   max-width: 800px;
   margin: 0 20px;
+
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow:0 2px 4px rgba(0,0,0,.4) ;
+  opacity: .8;
+  transform: scale(.8);
+}
+
+.slide li.active {
+  opacity: 1;
+  transform: scale(1);
 }

index.html

@@ -13,7 +13,6 @@
             <li><img src="img/foto1.jpg" alt=""></li>
             <li><img src="img/foto2.jpg" alt=""></li>
             <li><img src="img/foto3.jpg" alt=""></li>
-            <li><img src="img/foto3.jpg" alt=""></li>
             <li><img src="img/foto4.jpg" alt=""></li>
             <li><img src="img/foto5.jpg" alt=""></li>
             <li><img src="img/foto6.jpg" alt=""></li>

js/debounce.js

@@ -1,4 +1,4 @@
-/* export default function debounce(callback, delay) {
+export default function debounce(callback, delay) {
   let timer;
   return (...args) => {
     if (timer) clearTimeout(timer);
@@ -7,4 +7,4 @@
       timer = null;
     }, delay);
   };
-} */
+} 

js/script.js

@@ -4,4 +4,5 @@ const slide = new Slide('.slide', '.slide-wrapper');
 slide.init();
 console.log(slide);
 
-slide.changeSlide(3)
+slide.changeSlide(3);
+slide.activePrevSlide();

js/slide.js

@@ -1,8 +1,15 @@
+import debounce from './debounce.js';
+
 export default class Slide {
   constructor(slide, wrapper) {
     this.slide = document.querySelector(slide)
     this.wrapper = document.querySelector(wrapper);
     this.dist = { finalPosition: 0, startX: 0, movement: 0 }
+    this.activeClass = 'active';
+  }
+
+  transition(active) {
+    this.slide.style.transition = active ? 'transform .3s' : '';
   }
 
   moveSlide(distX) {
@@ -26,6 +33,7 @@ export default class Slide {
       movetype = 'touchmove';
     }
     this.wrapper.addEventListener(movetype, this.onMove);
+    this.transition(false);
   }
 
   onMove(event) {
@@ -38,6 +46,18 @@ export default class Slide {
     const movetype = (event.type === 'mouseup') ? 'mousemove' : 'touchmove';
     this.wrapper.removeEventListener(movetype, this.onMove);
     this.dist.finalPosition = this.dist.movePosition;
+    this.transition(true);
+    this.changeSlideOnEnd();
+  }
+
+  changeSlideOnEnd() {
+    if (this.dist.movement > 120 && this.index.next !== undefined) {
+      this.activeNextSlide();
+    } else if (this.dist.movement < -120 && this.index.prev !== undefined) {
+      this.activePrevSlide();
+    } else {
+      this.changeSlide(this.index.active);
+    }
   }
 
   addSlideEvents() {
@@ -47,12 +67,6 @@ export default class Slide {
     this.wrapper.addEventListener('touchend', this.onEnd);
   }
 
-  bindEvents() {
-    this.onStart = this.onStart.bind(this);
-    this.onMove = this.onMove.bind(this);
-    this.onEnd = this.onEnd.bind(this);
-  }
-
   // Slides config
 
   slidePosition(slide) {
@@ -81,12 +95,47 @@ export default class Slide {
     this.moveSlide(activeSlide.position);
     this.slidesIndexNav(index);
     this.dist.finalPosition = activeSlide.position;
+    this.changeActiveClass();
+  }
+
+  changeActiveClass() {
+    this.slideArray.forEach(item => item.element.classList.remove(this.activeClass));
+    this.slideArray[this.index.active].element.classList.add(this.activeClass);
+  }
+
+  activePrevSlide() {
+    if (this.index.prev !== undefined) this.changeSlide(this.index.prev);
+  }
+
+  activeNextSlide() {
+    if (this.index.next !== undefined) this.changeSlide(this.index.next);
+  }
+
+  onResize() {
+    setTimeout(() => {
+      this.slidesConfig();
+      this.changeSlide(this.index.active);
+    }, 1000);
+  }
+
+  addResizeEvent() {
+    window.addEventListener('resize', this.onResize);
+  }
+
+  bindEvents() {
+    this.onStart = this.onStart.bind(this);
+    this.onMove = this.onMove.bind(this);
+    this.onEnd = this.onEnd.bind(this);
+
+    this.onResize = debounce(this.onResize.bind(this), 200);
   }
 
   init() {
     this.bindEvents();
+    this.transition(true);
     this.addSlideEvents();
     this.slidesConfig();
+    this.addResizeEvent();
     return this;
   }
 }