update auto sliding

Author: junaid-travelopia

src/slider/README.md

@@ -53,19 +53,21 @@ slider.setCurrentSlide( 2 );
 
 ## Attributes
 
-| Attribute       | Required | Values          | Notes                                                                                                  |
-|-----------------|----------|-----------------|--------------------------------------------------------------------------------------------------------|
-| flexible-height | No       | `yes`           | Whether the height of the slider changes depending on the content inside the slides                    |
-| infinite        | No       | `yes`           | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards |
-| 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.                         |
+| Attribute           | Required | Values          | Notes                                                                                                  |
+|---------------------|----------|-----------------|--------------------------------------------------------------------------------------------------------|
+| flexible-height     | No       | `yes`           | Whether the height of the slider changes depending on the content inside the slides                    |
+| infinite            | No       | `yes`           | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards |
+| 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.                                                                              |
 
 ## Events
 
-| Event          | Notes                                             |
-|----------------|---------------------------------------------------|
-| slide-set      | When the current slide is set, but before sliding |
-| slide-complete | After sliding is complete                         |
+| Event               | Notes                                            |
+|---------------------|--------------------------------------------------|
+| slide-set           | When the current slide is set, but before sliding |
+| slide-complete      | After sliding is complete                        |
+| auto-slide-complete | After auto sliding is complete                   |
 
 ## Methods
 

src/slider/index.html

@@ -192,7 +192,7 @@
 		<br>
 
 		<!--Slider that autoplay -->
-		<tp-slider flexible-height="yes" auto-slide="yes" infinite="yes" auto-slide-interval="3000">
+		<tp-slider flexible-height="yes" infinite="yes" auto-slide-interval="3000">
 			<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>

src/slider/tp-slider.ts

@@ -29,21 +29,9 @@ export class TPSliderElement extends HTMLElement {
 
 		// Initialize slider.
 		this.slide();
+		this.autoSlide();
 		this.setAttribute( 'initialized', 'yes' );
 
-		// Auto Slide.
-		const autoSlide = this.getAttribute( 'auto-slide' );
-
-		// If auto slide is enabled, then we need to start the interval.
-		if ( 'yes' === autoSlide ) {
-			const interval = this.getAttribute( 'auto-slide-interval' );
-
-			// Start the interval.
-			setInterval( () => {
-				this.next();
-			}, parseInt( interval ?? '4000' ) );
-		}
-
 		// Event listeners.
 		if ( ! ( 'ResizeObserver' in window ) ) {
 			// We set the resize observer in `tp-slider-slide`
@@ -420,4 +408,31 @@ export class TPSliderElement extends HTMLElement {
 			this.next();
 		}
 	}
+
+	/**
+	 * Auto slide.
+	 */
+	protected autoSlide(): void {
+		// Auto Slide.
+		const autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );
+
+		// Check if we have an auto slider interval.
+		if ( ! autoSlideInterval ) {
+			return;
+		}
+
+		// Check for a valid interval.
+		const interval: number = parseInt( autoSlideInterval );
+		if ( interval <= 0 ) {
+			return;
+		}
+
+		// Run this on a timeout, rather than interval, so the interval can be controlled after
+		// the component is initialised.
+		setTimeout( (): void => {
+			this.next();
+			this.autoSlide();
+			this.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );
+		}, parseInt( autoSlideInterval ) );
+	}
 }