feat: add functionality to configure lateral spacing

src/components/Sliding/index.js

@@ -8,6 +8,8 @@ const events = [
   'slide:previous',
   'slide:remove',
   'slides:clear',
+  'slides:mode',
+  'padding',
 ];
 
 const activeSlide = (slides, slide) => {
@@ -16,19 +18,52 @@ const activeSlide = (slides, slide) => {
   });
 };
 
+const activeSlideShuffle = (slides, activeIndex) => {
+  const totalSlides = slides.length;
+  const hasMoreThanTwoSlides = totalSlides > 2;
+  const prevIndex = activeIndex === 0 ? totalSlides - 1 : activeIndex - 1;
+  const nextIndex = activeIndex === totalSlides - 1 ? 0 : activeIndex + 1;
+
+  slides.forEach((slide, index) => {
+    slide.classList.remove(
+      'sliding__slide--active',
+      'sliding__slide--unfocused',
+      'sliding__slide--prev',
+      'sliding__slide--next',
+    );
+
+    if (index === activeIndex) slide.classList.add('sliding__slide--active');
+
+    if (index !== activeIndex && !hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--unfocused');
+
+    if (index === prevIndex && hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--prev');
+
+    if (index === nextIndex && hasMoreThanTwoSlides)
+      slide.classList.add('sliding__slide--next');
+  });
+};
+
 const html = `
   <div class="sliding" data-select="sliding">
     <div class="sliding__content" data-select="sliding-content">
     </div>
   </div>`;
 
-export default function Sliding({ slides = [] }) {
+export default function Sliding({
+  slides = [],
+  shuffleMode = false,
+  sidePadding = 0,
+}) {
   Component.call(this, { html, events });
-
   this.slideIndex = 0;
 
   slides.forEach((item) => this.add(item));
 
+  this.setShuffleMode(shuffleMode);
+  if (slides.length > 1 && shuffleMode) this.setSidePadding(sidePadding);
+
   const $sliding = this.selected.get('sliding');
 
   makeSwipable($sliding);
@@ -42,10 +77,15 @@ export default function Sliding({ slides = [] }) {
   };
 
   this.listen('mount', () => {
+    const slidingContent = Array.from(
+      this.selected.get('sliding-content').children,
+    );
+
     activeSlide(
-      Array.from(this.selected.get('sliding-content').children),
+      slidingContent,
       this.selected.get('sliding-content').children[0],
     );
+    activeSlideShuffle(slidingContent, this.slideIndex);
     $sliding.addEventListener('swipe-left', this.swipeLeft());
     $sliding.addEventListener('swipe-right', this.swipeRight());
   });
@@ -70,32 +110,57 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {
   },
 
   next() {
-    this.slideIndex += 1;
     const slides = this.selected.get('sliding-content').children;
 
-    if (this.slideIndex > slides.length - 1) this.slideIndex = 0;
+    if (this.shuffleMode) {
+      const slideElements = Array.from(slides);
+
+      this.slideIndex =
+        this.slideIndex === slideElements.length - 1 ? 0 : this.slideIndex + 1;
+
+      activeSlideShuffle(slideElements, this.slideIndex);
+      this.emit('slide:next', slides[this.slideIndex]);
+    } else {
+      this.slideIndex += 1;
+
+      if (this.slideIndex > slides.length - 1) this.slideIndex = 0;
 
-    const slide = slides[this.slideIndex];
-    const container = this.selected.get('sliding').clientWidth;
-    this.selected.get('sliding-content').style.transform =
-      `translateX(${-this.slideIndex * container}px)`;
-    activeSlide(slides, slide);
-    this.emit('slide:next', slide);
+      const slide = slides[this.slideIndex];
+
+      const container = this.selected.get('sliding').clientWidth;
+      this.selected.get('sliding-content').style.transform =
+        `translateX(${-this.slideIndex * container}px)`;
+
+      activeSlide(slides, slide);
+      this.emit('slide:next', slide);
+    }
   },
 
   previous() {
-    this.slideIndex -= 1;
     const slides = this.selected.get('sliding-content').children;
 
-    if (this.slideIndex < 0) this.slideIndex = slides.length - 1;
+    if (this.shuffleMode) {
+      const slideElements = Array.from(slides);
+
+      this.slideIndex =
+        this.slideIndex === 0 ? slideElements.length - 1 : this.slideIndex - 1;
+
+      activeSlideShuffle(slideElements, this.slideIndex);
+      this.emit('slide:previous', slides[this.slideIndex]);
+    } else {
+      this.slideIndex -= 1;
 
-    const slide = slides[this.slideIndex];
-    const container = this.selected.get('sliding').clientWidth;
+      if (this.slideIndex < 0) this.slideIndex = slides.length - 1;
 
-    this.selected.get('sliding-content').style.transform =
-      `translateX(${-this.slideIndex * container}px)`;
-    activeSlide(slides, slide);
-    this.emit('slide:previous', slide);
+      const slide = slides[this.slideIndex];
+
+      const container = this.selected.get('sliding').clientWidth;
+      this.selected.get('sliding-content').style.transform =
+        `translateX(${-this.slideIndex * container}px)`;
+
+      activeSlide(slides, slide);
+      this.emit('slide:previous', slide);
+    }
   },
 
   clear() {
@@ -105,4 +170,20 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {
 
     this.emit('slides:clear');
   },
+
+  setSidePadding(sidePadding = 0) {
+    this.selected.get('sliding-content').style.padding = `0 ${sidePadding}px`;
+
+    this.emit('padding', sidePadding);
+  },
+
+  setShuffleMode(shuffleMode = false) {
+    const $sliding = this.selected.get('sliding');
+
+    this.shuffleMode = shuffleMode;
+
+    $sliding.classList.toggle('sliding--shuffle', shuffleMode);
+
+    this.emit('slides:mode', shuffleMode);
+  },
 });

src/components/Sliding/index.scss

@@ -1,5 +1,6 @@
 .sliding {
   width: 100%;
+
   overflow: hidden;
 
   margin: auto;
@@ -9,6 +10,8 @@
   &__content {
     display: flex;
 
+    align-items: center;
+
     transform: translateX(0);
 
     transition: transform 0.6s ease-in-out;
@@ -17,4 +20,53 @@
   &__slide {
     flex: 0 0 100%;
   }
+
+  &--shuffle {
+    .sliding__slide {
+      width: 62%;
+      height: 100%;
+
+      margin: auto;
+
+      position: absolute;
+      right: 0;
+      left: 0;
+
+      opacity: 0;
+
+      transition: all 450ms ease;
+
+      &--active {
+        width: 100%;
+
+        position: relative;
+
+        z-index: 2;
+
+        transform: translateX(0) scale(1);
+
+        opacity: 1;
+      }
+
+      &--unfocused,
+      &--prev,
+      &--next {
+        opacity: 0.6;
+      }
+
+      &--unfocused {
+        width: 100%;
+
+        transform: translate(0) scale(0.92);
+      }
+
+      &--prev {
+        transform: translateX(-40%) scale(0.8);
+      }
+
+      &--next {
+        transform: translateX(40%) scale(0.8);
+      }
+    }
+  }
 }

src/stories/Sliding.stories.js

@@ -42,11 +42,15 @@ export default {
   },
   argsTypes: {
     slides: { control: 'object', defaultValue: [] },
+    sidePadding: { control: 'number', defaultValue: 0 },
+    shuffleMode: { control: 'boolean', defaultValue: false },
   },
 };
 
 export const Default = {
   args: {
     slides: [$slide1, $slide2, $slide3],
+    sidePadding: 60,
+    shuffleMode: true,
   },
 };