How To a Stylish Banner Slider with Number Pagination Using Elementor Free

<script>
   
document.addEventListener("DOMContentLoaded", function () {
    const sliderContainer = document.querySelector(".slider-container");
    const sliderTrack = document.querySelector(".slider-track");
    // Select the original slide items only
    const originalSlides = Array.from(document.querySelectorAll(".slide"));
    const totalSlides = originalSlides.length;
    let currentIndex = 0; // Index relative to the original slides (0 to totalSlides - 1)
    let trackPosition = 1; // Index relative to the track including clones (1 to totalSlides)
    let autoSlideInterval;
    const autoSlideDelay = 4000; // 4 seconds
    const transitionDuration = 500; // Must match CSS transition duration

    // Use querySelector for elements that don't change names
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const pagination = document.getElementById('paginationNumber');

    /* --- 1. Initialization: Cloning for Infinite Loop --- */

    function initSlider() {
        // Clear existing clones if any (important for refactoring)
        const currentItems = Array.from(sliderTrack.children);
        currentItems.slice(totalSlides).forEach(item => item.remove());
        currentItems.slice(0, currentItems.length - totalSlides).forEach(item => item.remove());

        // Clone last slide and add at beginning (for smooth transition from 1 to 5)
        const lastClone = originalSlides[totalSlides - 1].cloneNode(true);
        sliderTrack.insertBefore(lastClone, sliderTrack.firstChild);

        // Clone first slide and add at end (for smooth transition from 5 to 1)
        const firstClone = originalSlides[0].cloneNode(true);
        sliderTrack.appendChild(firstClone);

        // Set initial position: Skip the first clone and show the first real slide
        sliderTrack.style.transition = 'none';
        sliderTrack.style.transform = 'translateX(-100%)';
        trackPosition = 1; // Start at the first real slide
    }

    /* --- 2. Pagination --- */

    function createPagination() {
        if (!pagination) return;
        pagination.innerHTML = '';
        for (let i = 0; i < totalSlides; i++) {
            const pageNum = document.createElement('div');
            pageNum.className = 'page-number';
            pageNum.textContent = (i + 1).toString().padStart(2, '0');
            // Use the original slide index (i) for navigation
            pageNum.addEventListener('click', () => goToSlide(i));
            pagination.appendChild(pageNum);
        }
        updatePagination();
    }

    function updatePagination() {
        if (!pagination) return;
        const pageNumbers = pagination.querySelectorAll('.page-number');
        pageNumbers.forEach((num, index) => {
            num.classList.toggle('active', index === currentIndex);
        });
    }
    
    /* --- 3. Slider Movement Core Function --- */

    function updateSlider(isNavigating = true) {
        // Calculate the percentage transform based on the trackPosition (which includes clones)
        const translateX = -(trackPosition * 100);
        sliderTrack.style.transform = `translateX(${translateX}%)`;

        // Apply smooth transition before movement
        if (isNavigating) {
             sliderTrack.style.transition = `transform ${transitionDuration / 1000}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
        }

        // Seamless looping reset logic
        if (trackPosition === totalSlides + 1) {
            // We've moved to the cloned first slide (after the real last slide)
            setTimeout(() => {
                // Instantly snap back to the position of the first real slide
                sliderTrack.style.transition = 'none';
                trackPosition = 1; // Reset to first real slide's track index
                sliderTrack.style.transform = 'translateX(-100%)';
            }, transitionDuration);
            currentIndex = 0; // Reset original slide index
        } else if (trackPosition === 0) {
            // We've moved to the cloned last slide (before the real first slide)
            setTimeout(() => {
                // Instantly snap back to the position of the last real slide
                sliderTrack.style.transition = 'none';
                trackPosition = totalSlides; // Reset to last real slide's track index
                sliderTrack.style.transform = `translateX(-${totalSlides * 100}%)`;
            }, transitionDuration);
            currentIndex = totalSlides - 1; // Reset original slide index
        } else {
            // Update the original slide index based on the track position
            currentIndex = trackPosition - 1;
        }

        updatePagination();
    }

    /* --- 4. Navigation Handlers --- */

    function nextSlide() {
        trackPosition++;
        updateSlider();
        resetAutoSlide();
    }

    function prevSlide() {
        trackPosition--;
        updateSlider();
        resetAutoSlide();
    }

    function goToSlide(index) {
        // The track position is the index + 1, because index 0 is the last clone
        trackPosition = index + 1;
        updateSlider();
        resetAutoSlide();
    }

    /* --- 5. Auto Slide & Interaction --- */

    function startAutoSlide() {
        stopAutoSlide();
        autoSlideInterval = setInterval(() => {
            nextSlide();
        }, autoSlideDelay);
    }

    function stopAutoSlide() {
        clearInterval(autoSlideInterval);
    }

    function resetAutoSlide() {
        stopAutoSlide();
        startAutoSlide();
    }

    // Event listeners
    if (nextBtn) nextBtn.addEventListener("click", nextSlide);
    if (prevBtn) prevBtn.addEventListener("click", prevSlide);

    sliderContainer.addEventListener('mouseenter', stopAutoSlide);
    sliderContainer.addEventListener('mouseleave', startAutoSlide);

    /* --- 6. Final Setup --- */

    initSlider();
    createPagination();
    startAutoSlide();

    // The track position must be 1 for the first update, setting currentIndex to 0
    currentIndex = 0;
    updatePagination();
});
</script>

<div class="pagination-number" id="paginationNumber">Pagination Number</div>