From 0f6e0959b011779667e1142fe7b388b322919df8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fiete=20B=C3=B6rner?= Date: Wed, 12 May 2021 22:35:41 +0200 Subject: [PATCH 1/3] implement slidesToScroll property by passing the slidesToScroll property it is now possible to scroll more than one slide at a time. If the settings are { slidesToShow: 3, slidesToScroll: 3 }, it now feels like "pages" with 3 elements. --- README.md | 1 + src/Agile.vue | 29 +++++++++++++++++++++++------ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 66ac8b0..85d2c8f 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,7 @@ Every first-level child of `` is a new slide. You also can group them ins | pauseOnHover | boolean | `true` | Pause autoplay when a slide is hovered | | [responsive](#Responsive) | object | `null` | Object containing breakpoints and settings objects | | rtl | boolean | `false` | Enable right-to-left mode | +| slidesToScroll | integer | `1` | Number of slides to scroll (is capped by the number of the current slide count) | | slidesToShow | integer | `1` | Number of slides to show | | speed | integer (ms) | `300` | Slide animation speed in milliseconds | | swipeDistance | integer (px) | `50` | Distance to swipe the next slide | diff --git a/src/Agile.vue b/src/Agile.vue index 844653a..0f85230 100644 --- a/src/Agile.vue +++ b/src/Agile.vue @@ -145,12 +145,25 @@ return (!this.initialSettings.responsive) ? [] : this.initialSettings.responsive.map(item => item.breakpoint) }, + slidesToScroll() { + // should never be greater than the slide count + return Math.min(this.settings.slidesToScroll, this.countSlides) + }, + + previousSlide() { + return this.currentSlide - this.slidesToScroll + }, + + nextSlide() { + return this.currentSlide + this.slidesToScroll + }, + canGoToPrev: function () { - return (this.settings.infinite || this.currentSlide > 0) + return (this.settings.infinite || this.previousSlide >= 0) }, canGoToNext: function () { - return (this.settings.infinite || this.currentSlide < this.countSlides - 1) + return (this.settings.infinite || this.nextSlide < this.countSlides) }, countSlides: function () { @@ -264,7 +277,11 @@ if (transition) { if (this.settings.infinite && n < 0) { - slideNextReal = this.countSlides - 1 + // example n=-1; countSlides=5; the real index of slide 5 is 4 (-1 + 5 = 4) + slideNextReal = n + this.countSlides + } else if (this.settings.infinite && n >= this.countSlides) { + // example n=5; countSlides=5; the real index of slide 1 is 0 (5 - 5 = 0) + slideNextReal = n - this.countSlides } else if (n >= this.countSlides) { slideNextReal = 0 } @@ -280,7 +297,7 @@ } } - let translateX = (!this.settings.fade) ? n * this.widthSlide * this.settings.slidesToScroll : 0 + let translateX = (!this.settings.fade) ? n * this.widthSlide : 0 this.transitionDelay = (transition) ? this.speed : 0 if (this.infinite || (this.currentSlide + this.slidesToShow <= this.countSlides)) { @@ -291,14 +308,14 @@ // Go to next slide goToNext () { if (this.canGoToNext) { - this.goTo(this.currentSlide + 1) + this.goTo(this.nextSlide) } }, // Go to previous slide goToPrev () { if (this.canGoToPrev) { - this.goTo(this.currentSlide - 1) + this.goTo(this.previousSlide) } }, From 9d161294241356715146d99c93cc158a99269cb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fiete=20B=C3=B6rner?= Date: Wed, 12 May 2021 23:03:04 +0200 Subject: [PATCH 2/3] add demo 5 for demonstrating the slidesToScroll property --- demo/App.vue | 5 ++- demo/examples/Example5.vue | 69 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 demo/examples/Example5.vue diff --git a/demo/App.vue b/demo/App.vue index f6037f8..eb932d3 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -7,6 +7,7 @@ example-2 example-3 example-4 + example-5 site-footer @@ -21,6 +22,7 @@ import Example2 from './examples/Example2' import Example3 from './examples/Example3' import Example4 from './examples/Example4' + import Example5 from './examples/Example5' export default { name: 'Demo', @@ -32,7 +34,8 @@ Example1, Example2, Example3, - Example4 + Example4, + Example5, } } diff --git a/demo/examples/Example5.vue b/demo/examples/Example5.vue new file mode 100644 index 0000000..fb585d3 --- /dev/null +++ b/demo/examples/Example5.vue @@ -0,0 +1,69 @@ + + + + + + From fdc29c19978dc2b8a3c75c3f3a7be9d2642735f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fiete=20B=C3=B6rner?= Date: Wed, 12 May 2021 23:40:13 +0200 Subject: [PATCH 3/3] rename computed prop to avoid property shadowing --- src/Agile.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Agile.vue b/src/Agile.vue index 0f85230..ef9151e 100644 --- a/src/Agile.vue +++ b/src/Agile.vue @@ -145,17 +145,17 @@ return (!this.initialSettings.responsive) ? [] : this.initialSettings.responsive.map(item => item.breakpoint) }, - slidesToScroll() { + computedSlidesToScroll() { // should never be greater than the slide count return Math.min(this.settings.slidesToScroll, this.countSlides) }, previousSlide() { - return this.currentSlide - this.slidesToScroll + return this.currentSlide - this.computedSlidesToScroll }, nextSlide() { - return this.currentSlide + this.slidesToScroll + return this.currentSlide + this.computedSlidesToScroll }, canGoToPrev: function () {