Add slides-per-view and step in slider

src/slider/README.md

@@ -60,6 +60,8 @@ slider.setCurrentSlide( 2 );
 | swipe               | No       | `yes`           | Whether to add support for swiping gestures on touch devices                                           |
 | behaviour           | No       | `fade`, `slide` | The default behaviour is to slide between slides. This can be updated to fade.                         |
 | auto-slide-interval | No       | <interval>      | Interval in milliseconds.                                                                              |
+| per-view            | No       | <per-view>      | Handles slider behavior having more than 1 slides. Default value is 1.                                 |
+| step                | No       | <step>          | Steps number of slides on next and previous transition. Default value is 1.                            |
 
 ## Events
 

src/slider/index.html

@@ -140,14 +140,16 @@
 
 		<br>
 
-		<tp-slider>
+		<!-- Slider with Slides Per View and Step -->
+		<tp-slider per-view="2" step="2">
 			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
 			<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
 			<tp-slider-track>
 				<tp-slider-slides>
 					<tp-slider-slide style="flex: calc(50% - 10px) 0 0; margin: 0 10px"><img src="https://picsum.photos/id/65/600/300" width="600" height="300" alt=""></tp-slider-slide>
 					<tp-slider-slide style="flex: calc(50% - 10px) 0 0; margin: 0 10px"><img src="https://picsum.photos/id/76/600/300" width="600" height="300" alt=""></tp-slider-slide>
 					<tp-slider-slide style="flex: calc(50% - 10px) 0 0; margin: 0 10px"><img src="https://picsum.photos/id/237/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide style="flex: calc(50% - 10px) 0 0; margin: 0 10px"><img src="https://picsum.photos/id/76/600/300" width="600" height="300" alt=""></tp-slider-slide>
 				</tp-slider-slides>
 			</tp-slider-track>
 			<tp-slider-nav>

src/slider/tp-slider-count.ts

@@ -50,15 +50,15 @@ export class TPSliderCountElement extends HTMLElement {
 			return;
 		}
 
-		const current = slider.getAttribute( 'current-slide' );
-		const total = slider.getAttribute( 'total' );
+		const current: number = slider.currentSlideIndex - 1 + slider.step;
+		const total: string = slider.getAttribute( 'total' ) ?? '';
 
 		this.innerHTML =
 			this.format
-				.replace( '$current', current || '' )
+				.replace( '$current', current.toString() )
 				.replace( '$total', total || '' );
 
-		this.setAttribute( 'current', current || '' );
+		this.setAttribute( 'current', current.toString() );
 		this.setAttribute( 'total', total || '' );
 	}
 }

src/slider/tp-slider.ts

@@ -65,7 +65,7 @@ export class TPSliderElement extends HTMLElement {
 	 * @return {Array} List of observed attributes.
 	 */
 	static get observedAttributes(): string[] {
-		return [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ];
+		return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];
 	}
 
 	/**
@@ -102,6 +102,42 @@ export class TPSliderElement extends HTMLElement {
 		this.setCurrentSlide( index );
 	}
 
+	/**
+	 * Get current step.
+	 *
+	 * @return {number} Current step.
+	 */
+	get step(): number {
+		return parseInt( this.getAttribute( 'step' ) ?? '1' );
+	}
+
+	/**
+	 * Set current step.
+	 *
+	 * @param {number} step Step.
+	 */
+	set step( step: number ) {
+		this.setAttribute( 'step', step.toString() );
+	}
+
+	/**
+	 * Get per view.
+	 *
+	 * @return {number} Current step.
+	 */
+	get perView(): number {
+		return parseInt( this.getAttribute( 'per-view' ) ?? '1' );
+	}
+
+	/**
+	 * Set per view.
+	 *
+	 * @param {number} perView Per view.
+	 */
+	set perView( perView: number ) {
+		this.setAttribute( 'per-view', perView.toString() );
+	}
+
 	/**
 	 * Get total number of slides.
 	 *
@@ -141,7 +177,14 @@ export class TPSliderElement extends HTMLElement {
 			return;
 		}
 
-		this.setCurrentSlide( this.currentSlideIndex + 1 );
+		const nextSlideIndex: number = this.currentSlideIndex + this.step;
+
+		// Check if the next slide step is not taking it beyond the last slide.
+		if ( nextSlideIndex > totalSlides ) {
+			return;
+		}
+
+		this.setCurrentSlide( nextSlideIndex );
 	}
 
 	/**
@@ -156,7 +199,14 @@ export class TPSliderElement extends HTMLElement {
 			return;
 		}
 
-		this.setCurrentSlide( this.currentSlideIndex - 1 );
+		const previousSlideNumber: number = this.currentSlideIndex - this.step;
+
+		// Check if the previous slide step is not taking it beyond the first slide.
+		if ( previousSlideNumber > 1 ) {
+			this.setCurrentSlide( previousSlideNumber );
+		} else {
+			this.setCurrentSlide( 1 );
+		}
 	}
 
 	/**
@@ -337,9 +387,26 @@ export class TPSliderElement extends HTMLElement {
 
 		// Check if we have a flexible height.
 		if ( 'yes' === this.getAttribute( 'flexible-height' ) ) {
-			// Set the height of the container to be the height of the current slide.
-			const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
-			slidesContainer.style.height = `${ height }px`;
+			// Check if per-view is greater than 1.
+			if ( this.perView > 1 ) {
+				const currentIndex: number = this.currentSlideIndex - 1;
+				const slidesOnCurrentView: number = currentIndex + this.perView;
+				let maxHeight: number = 0;
+
+				// Traverse all slides in the current view and add their height to the array.
+				for ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {
+					if ( slides[ i ].scrollHeight > maxHeight ) {
+						maxHeight = slides[ i ].scrollHeight;
+					}
+				}
+
+				// Set the height of the container to be the max height of the slides in the current view.
+				slidesContainer.style.height = `${ maxHeight }px`;
+			} else {
+				// Set the height of the container to be the height of the current slide.
+				const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
+				slidesContainer.style.height = `${ height }px`;
+			}
 		} else {
 			// Set the height of the container to be the height of the tallest slide.
 			let height: number = 0;