Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

toshbaba's avatar

Slider not working after Navigation

I am using livewire and laravel , at home secton i have testimonial section , for sliding am suing script -

    function updateSliderPosition() {
        slider.style.transform = `translateX(-${currentIndex * 100}%)`;
        indicators.forEach((indicator, index) => {
            indicator.classList.toggle('bg-blue-600', index === currentIndex);
            indicator.classList.toggle('bg-gray-200', index !== currentIndex);
        });
    }

    prevBtn.addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + indicators.length) % indicators.length;
        updateSliderPosition();
    });

    nextBtn.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % indicators.length;
        updateSliderPosition();
    });

    setInterval(() => {
        currentIndex = (currentIndex + 1) % indicators.length;
        updateSliderPosition();
    }, 5000); // Auto-slide every 5 seconds
});

but after navigation if i can back to that page where my tesimonial is there , the slider not working , how to solve this

0 likes
1 reply
toshbaba's avatar
    <div class="max-w-3xl mx-auto">
        <div class="relative overflow-hidden">
            <div id="testimonial-slider" class="transition-transform duration-500 ease-in-out flex">
                @foreach ($testimonials as $sunny)
                    <div class="w-full flex-shrink-0">
                        <div class="bg-white p-8 rounded-3xl  border border-gray-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="lucide lucide-quote w-12 h-12 text-blue-600 mb-6">
                                <path
                                    d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z">
                                </path>
                                <path
                                    d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z">
                                </path>
                            </svg>
                            <p class="text-gray-700 text-lg mb-8 leading-relaxed">"{{ $sunny->testi_content }}"</p>
                            <div class="flex items-center gap-4">
                                <img src="{{ asset('storage/' . $sunny->testi_image) }}"
                                    alt="{{ $sunny->testi_name }}" class="w-14 h-14 rounded-full object-cover">
                                <div>
                                    <h4 class="font-semibold text-gray-900">{{ $sunny->testi_name }}</h4>
                                    <p class="text-gray-600 text-sm">{{ $sunny->testi_position }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="flex items-center justify-center gap-4 mt-12">
            <button id="prev-btn"
                class="p-2 rounded-full border border-gray-200 hover:border-gray-400 transition-colors"
                aria-label="Previous testimonial">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-chevron-left w-6 h-6">
                    <path d="m15 18-6-6 6-6"></path>
                </svg>
            </button>
            <div class="flex gap-2">
                @foreach ($testimonials as $key => $sunny)
                    <div class="w-2 h-2 rounded-full transition-colors {{ $key == 0 ? 'bg-blue-600' : 'bg-gray-200' }}" data-index="{{ $key }}"></div>
                @endforeach
            </div>
            <button id="next-btn"
                class="p-2 rounded-full border border-gray-200 hover:border-gray-400 transition-colors"
                aria-label="Next testimonial">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-chevron-right w-6 h-6">
                    <path d="m9 18 6-6-6-6"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

Please or to participate in this conversation.