diff --git a/src/slider/index.html b/src/slider/index.html
index c3a68e2..c53dc8a 100644
--- a/src/slider/index.html
+++ b/src/slider/index.html
@@ -33,7 +33,7 @@
-
+
@@ -51,10 +51,11 @@
-
-
-
-
+
+
+
+
+
1 / 4
diff --git a/src/slider/index.ts b/src/slider/index.ts
index 87f62f7..5eb6cc7 100644
--- a/src/slider/index.ts
+++ b/src/slider/index.ts
@@ -18,11 +18,11 @@ import { TPSliderCountElement } from './tp-slider-count';
/**
* Register Components.
*/
+customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider', TPSliderElement );
customElements.define( 'tp-slider-count', TPSliderCountElement );
customElements.define( 'tp-slider-track', TPSliderTrackElement );
customElements.define( 'tp-slider-slides', TPSliderSlidesElement );
customElements.define( 'tp-slider-slide', TPSliderSlideElement );
customElements.define( 'tp-slider-arrow', TPSliderArrowElement );
-customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );
diff --git a/src/slider/tp-slider-nav.ts b/src/slider/tp-slider-nav.ts
index 5aae6c0..407de51 100644
--- a/src/slider/tp-slider-nav.ts
+++ b/src/slider/tp-slider-nav.ts
@@ -1,5 +1,59 @@
+/**
+ * Internal dependencies.
+ */
+import { TPSliderElement } from './tp-slider';
+
/**
* TP Slider Nav.
*/
export class TPSliderNavElement extends HTMLElement {
+ /**
+ * Properties.
+ */
+ protected template: HTMLTemplateElement | null = null;
+ protected slider: TPSliderElement | null = null;
+
+ /**
+ * Constructor.
+ */
+ constructor() {
+ // Initialize parent.
+ super();
+
+ // Get elements.
+ this.template = this.querySelector( 'template' );
+ this.slider = this.closest( 'tp-slider' );
+ }
+
+ /**
+ * Update nav items based on template.
+ */
+ public updateNavItems(): void {
+ // Bail if no template.
+ if ( ! this.template || ! this.slider ) {
+ // Exit.
+ return;
+ }
+
+ // Total slides.
+ const step = Number( this.slider?.getAttribute( 'step' ) ? Number( this.slider?.getAttribute( 'per-view' ) ?? '1' ) : 1 );
+ const totalSlides = Number( this.slider?.getAttribute( 'total' ) ?? 0 );
+
+ // Calculate the number of navigation items.
+ const totalNavItems = Math.ceil( totalSlides / step );
+
+ // Clear the navigation.
+ this.innerHTML = '';
+
+ // Append the navigation items.
+ for ( let i = 1; i <= totalNavItems; i++ ) {
+ // Clone the template.
+ const navItem: Node = this.template.content.cloneNode( true );
+ const div: HTMLDivElement = document.createElement( 'div' );
+ div.appendChild( navItem );
+
+ // Append the navigation item.
+ this.innerHTML += div.innerHTML.replace( '$index', i.toString() );
+ }
+ }
}
diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts
index b1b476a..9c5409b 100644
--- a/src/slider/tp-slider.ts
+++ b/src/slider/tp-slider.ts
@@ -4,6 +4,7 @@
import { TPSliderSlidesElement } from './tp-slider-slides';
import { TPSliderSlideElement } from './tp-slider-slide';
import { TPSliderCountElement } from './tp-slider-count';
+import { TPSliderNavElement } from './tp-slider-nav';
import { TPSliderNavItemElement } from './tp-slider-nav-item';
import { TPSliderArrowElement } from './tp-slider-arrow';
@@ -367,7 +368,7 @@ export class TPSliderElement extends HTMLElement {
*/
update(): void {
// Get sub-components.
- const sliderNavItems: NodeListOf | null = this.querySelectorAll( 'tp-slider-nav-item' );
+ const sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );
const sliderCounts: NodeListOf | null = this.querySelectorAll( 'tp-slider-count' );
const leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction="previous"]' );
const rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction="next"]' );
@@ -387,6 +388,12 @@ export class TPSliderElement extends HTMLElement {
} );
}
+ // First, set the template for the slider nav.
+ sliderNav?.updateNavItems();
+
+ // Once the template has been set, query the slider nav items.
+ const sliderNavItems: NodeListOf | null = this.querySelectorAll( 'tp-slider-nav-item' );
+
// Set current slider nav item.
if ( sliderNavItems ) {
sliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {