SLIDER

Author: wesbos

exercises/57 - Slider/index.html

@@ -52,7 +52,7 @@
     </div>
 
   </div>
-  <script src="./src/index.js"></script>
+  <script src="./src/index-prototype.js"></script>
 </body>
 
 </html>

exercises/57 - Slider/src/index-prototype-FINISHED.js

@@ -0,0 +1,75 @@
+function Slider(slider) {
+  if (!(slider instanceof Element)) {
+    throw new Error('No slider passed in');
+  }
+
+  // select the elements needed for the slider
+  this.slides = slider.querySelector('.slides');
+  this.slider = slider;
+  const prevButton = slider.querySelector('.goToPrev');
+  const nextButton = slider.querySelector('.goToNext');
+
+  // when this slider is created, run the start slider function
+  this.startSlider();
+  this.applyClasses();
+
+  // Event listeners
+  prevButton.addEventListener('click', () => this.move('back'));
+  nextButton.addEventListener('click', () => this.move());
+}
+
+Slider.prototype.startSlider = function() {
+  this.current =
+    this.slider.querySelector('.current') || this.slides.firstElementChild;
+  this.prev =
+    this.current.previousElementSibling || this.slides.lastElementChild;
+  this.next = this.current.nextElementSibling || this.slides.firstElementChild;
+};
+
+Slider.prototype.applyClasses = function() {
+  this.current.classList.add('current');
+  this.prev.classList.add('prev');
+  this.next.classList.add('next');
+};
+
+Slider.prototype.move = function(direction) {
+  // first strip all the classes off the current slides
+  const classesToRemove = ['prev', 'current', 'next'];
+  this.prev.classList.remove(...classesToRemove);
+  this.current.classList.remove(...classesToRemove);
+  this.next.classList.remove(...classesToRemove);
+  if (direction === 'back') {
+    // make an new array of the new values, and destructure them over and into the prev, current and next variables
+    [this.prev, this.current, this.next] = [
+      // get the prev slide, if there is none, get the last slide from the entire slider for wrapping
+      this.prev.previousElementSibling || this.slides.lastElementChild,
+      this.prev,
+      this.current,
+    ];
+  } else {
+    [this.prev, this.current, this.next] = [
+      this.current,
+      this.next,
+      // get the next slide, or if it's at the end, loop around and grab the first slide
+      this.next.nextElementSibling || this.slides.firstElementChild,
+    ];
+  }
+
+  this.applyClasses();
+};
+
+const mySlider = new Slider(document.querySelector('.slider'));
+const dogSlider = new Slider(document.querySelector('.dog-slider'));
+
+console.log(mySlider, dogSlider);
+
+window.dogSlider = dogSlider;
+
+window.addEventListener('keyup', function(e) {
+  if (e.key === 'ArrowRight') {
+    dogSlider.move();
+  }
+  if (e.key === 'ArrowLeft') {
+    dogSlider.move('back');
+  }
+});

exercises/57 - Slider/src/index.js

@@ -0,0 +1,63 @@
+function Slider(slider) {
+  if (!(slider instanceof Element)) {
+    throw new Error('No slider passed in');
+  }
+  // create some variables for working iwth the slider
+  let prev;
+  let current;
+  let next;
+  // select the elements needed for the slider
+  const slides = slider.querySelector('.slides');
+  const prevButton = slider.querySelector('.goToPrev');
+  const nextButton = slider.querySelector('.goToNext');
+
+  function startSlider() {
+    current = slider.querySelector('.current') || slides.firstElementChild;
+    prev = current.previousElementSibling || slides.lastElementChild;
+    next = current.nextElementSibling || slides.firstElementChild;
+    console.log({ current, prev, next });
+  }
+
+  function applyClasses() {
+    current.classList.add('current');
+    prev.classList.add('prev');
+    next.classList.add('next');
+  }
+
+  function move(direction) {
+    // first strip all the classes off the current slides
+    const classesToRemove = ['prev', 'current', 'next'];
+    prev.classList.remove(...classesToRemove);
+    current.classList.remove(...classesToRemove);
+    next.classList.remove(...classesToRemove);
+    if (direction === 'back') {
+      // make an new array of the new values, and destructure them over and into the prev, current and next variables
+      [prev, current, next] = [
+        // get the prev slide, if there is none, get the last slide from the entire slider for wrapping
+        prev.previousElementSibling || slides.lastElementChild,
+        prev,
+        current,
+      ];
+    } else {
+      [prev, current, next] = [
+        current,
+        next,
+        // get the next slide, or if it's at the end, loop around and grab the first slide
+        next.nextElementSibling || slides.firstElementChild,
+      ];
+    }
+
+    applyClasses();
+  }
+
+  // when this slider is created, run the start slider function
+  startSlider();
+  applyClasses();
+
+  // Event listeners
+  prevButton.addEventListener('click', () => move('back'));
+  nextButton.addEventListener('click', move);
+}
+
+const mySlider = Slider(document.querySelector('.slider'));
+const dogSlider = Slider(document.querySelector('.dog-slider'));