박진선의 프로그래밍

<div class="section">
    <div class="section-inner">
        <h1>타이틀</h1>
        <div class="section-contents">
            <ul>
                <li>페이징 1</li>
                <li>페이징 2</li>
                <li>페이징 3</li>
            </ul>
            <div class="contents-wrap">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="img-box">
                                <img src="/img/brand01.png" alt="이미지1">
                            </div>
                        </div><div class="swiper-slide">
                            <div class="img-box">
                                <img src="/img/brand02.png" alt="이미지2">
                            </div>
                        </div><div class="swiper-slide">
                            <div class="img-box">
                                <img src="/img/brand03.png" alt="이미지3">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const swiper = new Swiper('.swiper', {
            loop: true,
            on: {
                slideChange: function () {
                    const index_currentSlide      = this.realIndex;
                    const currentSlide            = this.slides[index_currentSlide]
                    const that = this;
                    document.querySelectorAll('.section-contents ul li').forEach((el, index) => {
                        index === that.realIndex ? el.classList.add('active') : el.classList.remove('active');
                    });
                },
            },
        });
        document.querySelectorAll('.section-contents ul li').forEach((el, index) => {
            el.addEventListener('click', () => {
                swiper.slideTo(index);
            });
        });
    </script>
</div>