배너 캐러셀

<div class="main-sect">
    <div class="inner">
        <div class="main-box-responsive type-wrap">
            <div class="d-fix">
                <div class="main-tit-wrap">
                    <h2 class="tit">배너영역 타이틀</h2>
                </div>

                <div class="in">
                    <div class="main-d-ban-swiper">
                        <div class="swiper">
                            <ul class="swiper-wrapper">
                                <li class="swiper-slide">
                                    <div class="text">
                                        <p class="cate">서브타이틀</p>
                                        <p class="tit">타이틀</p>
                                    </div>
                                    <div class="im">
                                        <svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
                                            <rect width="243" height="178" fill="#E6E8EA" />
                                        </svg>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="text">
                                        <p class="cate">서브타이틀</p>
                                        <p class="tit">타이틀</p>
                                    </div>
                                    <div class="im">
										<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
											<rect width="243" height="178" fill="#E6E8EA"/>
										</svg>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-indicator">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-controller">
                                <button type="button" class="swiper-button-play">
                                    <span class="sr-only">슬라이드 재생</span>
                                </button>
                                <button type="button" class="swiper-button-stop">
                                    <span class="sr-only">슬라이드 멈춤</span>
                                </button>
                            </div>
                            <div class="swiper-navigation">
                                <button type="button" class="swiper-button-prev">
                                    <span class="sr-only">이전</span>
                                </button>
                                <button type="button" class="swiper-button-next">
                                    <span class="sr-only">다음</span>
                                </button>
                                <a href="#" class="swiper-button-more">
                                    <span class="sr-only">더 보기</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    const eleBanSwiper = new Swiper(".main-d-ban-swiper .swiper", {
        slidesPerView: 1,
        spaceBetween: 16,
        speed: 400,
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
        navigation: {
            nextEl: ".main-d-ban-swiper .swiper-button-next",
            prevEl: ".main-d-ban-swiper .swiper-button-prev",
        },
        pagination: {
            el: ".main-d-ban-swiper .swiper-pagination",
            type: "fraction",
        },
    });
    const $eleBanSwiperPlay = document.querySelector(".main-d-ban-swiper .swiper-button-play");
    const $eleBanSwiperStop = document.querySelector(".main-d-ban-swiper .swiper-button-stop");

    $eleBanSwiperPlay.style.display = "none";

    $eleBanSwiperPlay.addEventListener("click", () => {
        eleBanSwiper.autoplay.start();
        $eleBanSwiperStop.style.display = "";
        $eleBanSwiperPlay.style.display = "none";
    });

    $eleBanSwiperStop.addEventListener("click", () => {
        eleBanSwiper.autoplay.stop();
        $eleBanSwiperStop.style.display = "none";
        $eleBanSwiperPlay.style.display = "";
    });
</script>

<template>
  <div class="main-sect">
    <div class="inner">
        <div class="main-box-responsive type-wrap">
            <div class="d-fix">
                <div class="main-tit-wrap">
                    <h2 class="tit">배너영역 타이틀</h2>
                </div>

                <div class="in">
                    <div class="main-d-ban-swiper">
                        <div class="swiper">
                            <ul class="swiper-wrapper">
                                <li class="swiper-slide">
                                    <div class="text">
                                        <p class="cate">서브타이틀</p>
                                        <p class="tit">타이틀</p>
                                    </div>
                                    <div class="im">
                                        <svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
                                            <rect width="243" height="178" fill="#E6E8EA" />
                                        </svg>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="text">
                                        <p class="cate">서브타이틀</p>
                                        <p class="tit">타이틀</p>
                                    </div>
                                    <div class="im">
										<svg width="243" height="178" viewBox="0 0 243 178" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="예시">
											<rect width="243" height="178" fill="#E6E8EA"/>
										</svg>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-indicator">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-controller">
                                <button type="button" class="swiper-button-play">
                                    <span class="sr-only">슬라이드 재생</span>
                                </button>
                                <button type="button" class="swiper-button-stop">
                                    <span class="sr-only">슬라이드 멈춤</span>
                                </button>
                            </div>
                            <div class="swiper-navigation">
                                <button type="button" class="swiper-button-prev">
                                    <span class="sr-only">이전</span>
                                </button>
                                <button type="button" class="swiper-button-next">
                                    <span class="sr-only">다음</span>
                                </button>
                                <a href="#" class="swiper-button-more">
                                    <span class="sr-only">더 보기</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    const eleBanSwiper = new Swiper(".main-d-ban-swiper .swiper", {
        slidesPerView: 1,
        spaceBetween: 16,
        speed: 400,
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
        navigation: {
            nextEl: ".main-d-ban-swiper .swiper-button-next",
            prevEl: ".main-d-ban-swiper .swiper-button-prev",
        },
        pagination: {
            el: ".main-d-ban-swiper .swiper-pagination",
            type: "fraction",
        },
    });
    const $eleBanSwiperPlay = document.querySelector(".main-d-ban-swiper .swiper-button-play");
    const $eleBanSwiperStop = document.querySelector(".main-d-ban-swiper .swiper-button-stop");

    $eleBanSwiperPlay.style.display = "none";

    $eleBanSwiperPlay.addEventListener("click", () => {
        eleBanSwiper.autoplay.start();
        $eleBanSwiperStop.style.display = "";
        $eleBanSwiperPlay.style.display = "none";
    });

    $eleBanSwiperStop.addEventListener("click", () => {
        eleBanSwiper.autoplay.stop();
        $eleBanSwiperStop.style.display = "none";
        $eleBanSwiperPlay.style.display = "";
    });
</script>
</template>

<script setup lang="ts">
// 배너 캐러셀 컴포넌트
// 배너용 캐러셀 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>