Feature: implement slidesToScroll property

README.md

@@ -117,6 +117,7 @@ Every first-level child of `<agile>` 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 | 

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,
 		}
 	}
 </script>

demo/examples/Example5.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+	section.section.section--demo-5
+		div.container
+			div.row
+				div.col-xs-12
+					h2.section__title #[strong #5] demo
+					p.section__description Scroll multiple slides at once
+
+			div.row
+				div.col-xs-12
+					agile(:slidesToShow="3" :slidesToScroll="3" :dots="false")
+						div.slide(v-for="slide in 9" :key="slide")
+							div.slide__content  {{ slide }}
+
+						template(#prevButton)
+							i.fas.fa-chevron-left
+
+						template(#nextButton)
+							i.fas.fa-chevron-right
+
+</template>
+
+
+<script>
+	export default {
+		name: 'Example5',
+	}
+</script>
+
+<style lang="sass">
+	.section--demo-5
+		.main
+			margin-bottom: 30px
+
+		// Basic VueAgile styles
+		.agile
+			&__nav-button
+				color: #ccc
+				cursor: pointer
+				font-size: 24px
+				transition-duration: .3s
+				position: absolute
+				top: 50%
+				transform: translateY(-50%)
+
+				&:hover
+					color: #888
+
+				&--prev
+					left: -45px
+
+				&--next
+					right: -45px
+
+		// Slides styles
+		.slide
+			padding: 0 20px
+			height: 150px
+
+		.slide__content
+			border: 1px solid black
+			display: flex
+			align-items: center
+			justify-content: center
+			height: 100%
+			font-size: 1.5em
+
+
+</style>

src/Agile.vue

@@ -145,12 +145,25 @@
 				return (!this.initialSettings.responsive) ? [] : this.initialSettings.responsive.map(item => item.breakpoint)
 			},
 
+			computedSlidesToScroll() {
+				// should never be greater than the slide count
+				return Math.min(this.settings.slidesToScroll, this.countSlides)
+			},
+
+			previousSlide() {
+				return this.currentSlide - this.computedSlidesToScroll
+			},
+
+			nextSlide() {
+				return this.currentSlide + this.computedSlidesToScroll
+			},
+
 			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)
 				}
 			},