<div class="m1">
    <div class="slide_wrap">
        <div class="info_slide swiper">
            <div class="roll swiper-wrapper">
                <?php for ($i=0; $i < 5; $i++) { ?>
                <div class="item swiper-slide">
                    <img src="http://wimg.kr/333x227" alt="">
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="ctr_wrap">
            <div class="dots"></div>
            <div class="num">
                <span class="current">01</span> · <span class="total">03</span>
            </div>
            <button type="button" class="prev" aria-label="Previous slide"><img src="<?=DIR?>/images/main/btn-slide-arrow.png" alt=""></button>
            <button type="button" class="next" aria-label="Next slide"><img src="<?=DIR?>/images/main/btn-slide-arrow.png" alt=""></button>
            <button type="button" class="swiper-play" aria-label="Play" style="display: none;"><i class="axi axi-play-arrow"></i></button>
            <button type="button" class="swiper-stop" aria-label="Pause"><i class="axi axi-pause2"></i></button>
        </div>
    </div>
</div>

const main_swiper = {
    'init' : function () {
        this.action();
    },
    'action' : function () {
        window.addEventListener('load', function () {
            const swiper1 = new Swiper('.m1 .info_slide', {
                loop: true,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.m1 .dots',
                    clickable: true
                },
                navigation: {
                    prevEl: '.m1 .prev',
                    nextEl: '.m1 .next',
                    clickable: true
                },
                allowTouchMove: true,      // 모바일/PC 드래그 모두 허용
                simulateTouch: true,       // 마우스로 드래그 허용
                grabCursor: true,           // 마우스 올렸을 때 손바닥 커서
                speed: 500, // 슬라이드 전환 속도
                on: {
                    init: function () {
                        updateCustomPagination(this);
                    },
                    slideChangeTransitionEnd: function () {
                        updateCustomPagination(this);
                    }
                },
                slidesPerView: 4, // pc 기본 개수
                breakpoints: {
                    1400: {
                        slidesPerView: 4 // PC
                    },
                    750: {
                        slidesPerView: 3 // 태블릿
                    },
                    0: {
                        slidesPerView: 2 // 모바일
                    }
                },
            });
           
            // 좌우 버튼 기능
            document.querySelector('.m1 .prev').addEventListener('click', () => swiper.slidePrev());
            document.querySelector('.m1 .next').addEventListener('click', () => swiper.slideNext());
            function updateCustomPagination(swiper) {
                const current = document.querySelector('.m1 .current');
                const total = document.querySelector('.m1 .total');
                let realIndex = swiper.realIndex + 1;
                let totalSlides = swiper.slides.length - (swiper.loop ? 2 : 0); // loop 시 복제 슬라이드 제외
                current.textContent = realIndex.toString().padStart(2, '0');
                total.textContent = totalSlides.toString().padStart(2, '0');
            }
           
            // 플레이 버튼 기능
            const playBtn = document.querySelector('.m1 .swiper-play');
            const stopBtn = document.querySelector('.m1 .swiper-stop');
            if (playBtn && stopBtn) {
                playBtn.addEventListener('click', function () {
                    swiper1.autoplay.start();
                    playBtn.style.display = 'none';
                    stopBtn.style.display = 'inline-block';
                });
                stopBtn.addEventListener('click', function () {
                    swiper1.autoplay.stop();
                    stopBtn.style.display = 'none';
                    playBtn.style.display = 'inline-block';
                });
            }

        });
    }
};