diff --git a/src/components/Sliding/index.js b/src/components/Sliding/index.js index 84883e65..c5ee603e 100644 --- a/src/components/Sliding/index.js +++ b/src/components/Sliding/index.js @@ -82,55 +82,41 @@ Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, { next() { const slides = this.selected.get('sliding-content').children; - if (this.shuffleMode) { - const slideElements = Array.from(slides); + this.slideIndex += 1; - this.slideIndex = - this.slideIndex === slideElements.length - 1 ? 0 : this.slideIndex + 1; + if (this.slideIndex > slides.length - 1) this.slideIndex = 0; - 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 slide = slides[this.slideIndex]; + if (!this.shuffleMode) { 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); } + + activeSlideShuffle(slides, this.slideIndex); + this.emit('slide:next', slide); }, previous() { const slides = this.selected.get('sliding-content').children; - if (this.shuffleMode) { - const slideElements = Array.from(slides); + this.slideIndex -= 1; - this.slideIndex = - this.slideIndex === 0 ? slideElements.length - 1 : this.slideIndex - 1; + if (this.slideIndex < 0) this.slideIndex = slides.length - 1; - activeSlideShuffle(slideElements, this.slideIndex); - this.emit('slide:previous', slides[this.slideIndex]); - } else { - this.slideIndex -= 1; - - if (this.slideIndex < 0) this.slideIndex = slides.length - 1; - - const slide = slides[this.slideIndex]; + const slide = slides[this.slideIndex]; + if (!this.shuffleMode) { 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); } + + activeSlideShuffle(slides, this.slideIndex); + this.emit('slide:previous', slide); }, clear() { diff --git a/src/components/Sliding/index.scss b/src/components/Sliding/index.scss index 46149968..963d0955 100644 --- a/src/components/Sliding/index.scss +++ b/src/components/Sliding/index.scss @@ -23,49 +23,46 @@ &--shuffle { .sliding__slide { - width: 62%; - height: 100%; + width: 100%; - margin: auto; + display: none; + flex: unset; - position: absolute; - right: 0; - left: 0; + position: relative; - opacity: 0; + z-index: 0; transition: all 450ms ease; &--active { - width: 100%; - - position: relative; + display: block; z-index: 2; + } + + &--prev, + &--next, + &--unfocused { + width: 50%; + + display: block; + + position: absolute; - transform: translateX(0) scale(1); + transform: scale(0.9); - opacity: 1; + opacity: 0.6; + inset: 0; } - &--unfocused, - &--prev, &--next { - opacity: 0.6; + left: auto; } &--unfocused { width: 100%; - transform: translate(0) scale(0.92); - } - - &--prev { - transform: translateX(-40%) scale(0.8); - } - - &--next { - transform: translateX(40%) scale(0.8); + transform: scale(0.94); } } } diff --git a/src/components/Sliding/utils/activeSlideShuffle.js b/src/components/Sliding/utils/activeSlideShuffle.js index 67ef4102..4ca5be88 100644 --- a/src/components/Sliding/utils/activeSlideShuffle.js +++ b/src/components/Sliding/utils/activeSlideShuffle.js @@ -4,7 +4,7 @@ export const activeSlideShuffle = (slides, activeIndex) => { const prevIndex = activeIndex === 0 ? totalSlides - 1 : activeIndex - 1; const nextIndex = activeIndex === totalSlides - 1 ? 0 : activeIndex + 1; - slides.forEach((slide, index) => { + Array.from(slides).forEach((slide, index) => { slide.classList.remove( 'sliding__slide--active', 'sliding__slide--unfocused',