Fix Slider Next action when per-view is added

src/slider/tp-slider-count.ts

@@ -58,8 +58,8 @@ export class TPSliderCountElement extends HTMLElement {
 			return;
 		}
 
-		// Initializing current and total variables.
-		const current: number = slider.currentSlideIndex - 1 + slider.step;
+		// Initializing current variable including step. Along with initializing total variable.
+		const current: number = Math.min( slider.currentSlideIndex - 1 + slider.step, slider.getTotalSlides() );
 		const total: string = slider.getAttribute( 'total' ) ?? '';
 
 		// Updating variables in format attribute.

src/slider/tp-slider-nav-item.ts

@@ -8,12 +8,18 @@ import { TPSliderNavElement } from './tp-slider-nav';
  * TP Slider Nav Item.
  */
 export class TPSliderNavItemElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected slider : TPSliderElement | null;
+
 	/**
 	 * Constructor.
 	 */
 	constructor() {
 		// Initialize parent.
 		super();
+		this.slider = this.closest( 'tp-slider' );
 
 		// Get the nav-item button.
 		this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );
@@ -23,17 +29,14 @@ export class TPSliderNavItemElement extends HTMLElement {
 	 * Handle when the button is clicked.
 	 */
 	handleClick(): void {
-		// Get the slider.
-		const slider: TPSliderElement | null = this.closest( 'tp-slider' );
-
 		// Check if slider exists.
-		if ( ! slider ) {
+		if ( ! this.slider ) {
 			// No its not! Terminate.
 			return;
 		}
 
 		// Set current slide.
-		slider.setCurrentSlide( this.getIndex() );
+		this.slider.setCurrentSlide( this.getIndex() );
 	}
 
 	/**
@@ -50,8 +53,9 @@ export class TPSliderNavItemElement extends HTMLElement {
 
 		// No, find it in the navigation.
 		const slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );
+		const step = this.slider?.step;
 
-		// Return index of this element.
-		return Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;
+		// Return index of this element considering the step value.
+		return ( Array.from( slideNav?.children ?? [] ).indexOf( this ) * ( step ?? 1 ) ) + 1;
 	}
 }

src/slider/tp-slider.ts

@@ -210,22 +210,23 @@ export class TPSliderElement extends HTMLElement {
 		// Initialize total slides variable.
 		const totalSlides: number = this.getTotalSlides();
 
-		// Check if we are at the last slide.
-		if ( this.currentSlideIndex >= totalSlides ) {
+		// Check if we are at the last slide considering per view attribute.
+		if ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {
 			// Check if we are in infinite mode.
 			if ( 'yes' === this.getAttribute( 'infinite' ) ) {
+				// Yes, we are, and go back to first slide.
 				this.setCurrentSlide( 1 );
 			}
 
 			// Terminate.
 			return;
 		}
 
-		// Get next slide index.
-		const nextSlideIndex: number = this.currentSlideIndex + this.step;
+		// Get next slide index by adding minimum of step or remaining number of slides.
+		const nextSlideIndex: number = this.currentSlideIndex + Math.min( this.step, totalSlides - this.currentSlideIndex - this.perView + 1 );
 
 		// Check if the next slide step is not taking it beyond the last slide.
-		if ( nextSlideIndex > totalSlides ) {
+		if ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {
 			// Yes, it is.
 			return;
 		}
@@ -242,7 +243,7 @@ export class TPSliderElement extends HTMLElement {
 		if ( this.currentSlideIndex <= 1 ) {
 			// Check if we are in infinite mode.
 			if ( 'yes' === this.getAttribute( 'infinite' ) ) {
-				this.setCurrentSlide( this.getTotalSlides() );
+				this.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );
 			}
 
 			// Terminate.
@@ -389,8 +390,8 @@ export class TPSliderElement extends HTMLElement {
 		// Set current slider nav item.
 		if ( sliderNavItems ) {
 			sliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {
-				// Update current attribute.
-				if ( this.currentSlideIndex - 1 === index ) {
+				// Update current attribute after considering step.
+				if ( Math.ceil( this.currentSlideIndex / this.step ) - 1 === index ) {
 					navItem.setAttribute( 'current', 'yes' );
 				} else {
 					navItem.removeAttribute( 'current' );
@@ -416,7 +417,7 @@ export class TPSliderElement extends HTMLElement {
 		// Enable / disable arrows.
 		if ( 'yes' !== this.getAttribute( 'infinite' ) ) {
 			// For the last slide.
-			if ( this.getCurrentSlide() === this.getTotalSlides() ) {
+			if ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {
 				rightArrow?.setAttribute( 'disabled', 'yes' );
 			} else {
 				rightArrow?.removeAttribute( 'disabled' );