Fakel-Gym/blocks/hero-block/hero-block.js

document.addEventListener('DOMContentLoaded', function() {
    const heroBlocks = document.querySelectorAll('.hero-block');

    heroBlocks.forEach(function(block) {
        const swiperContainer = block.querySelector('.swiper');

        if (!swiperContainer) return;

        const swiper = new Swiper(swiperContainer, {
            slidesPerView: 1,
            loop: true,
            grabCursor: true,
            on: {
                slideChange: function () {
                    const realIndex = this.realIndex;
                    const paginationItems = block.querySelectorAll('.pagination-item');

                    paginationItems.forEach((item, index) => {
                        const line = item.querySelector('.pagination-line');
                        const text = item.querySelector('.slide-text');

                        if (index === realIndex) {
                            item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
                            line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
                        } else {
                            item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
                            line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
                        }
                    });
                }
            }
        });

        // Навигация
        block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
        block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());

        // Пагинация
        block.querySelectorAll('.pagination-item').forEach((item, index) => {
            item.addEventListener('click', () => swiper.slideToLoop(index));
        });
    });
});