greenwhale/app/pages/index.vue

<template>
  <main>
    <div class="main--visual--wrap">
      <div class="main--swiper--wrap">
        <swiper
          ref="mainSwiperRef"
          :pagination="{
            type: 'progressbar',
          }"
          :navigation="true"
          :autoplay="{
            delay: 3000,
            disableOnInteraction: false,
          }"
          :modules="modules"
          class="main--swiper"
          @swiper="onSwiper"
        >
          <swiper-slide class="visual--img">
            <div class="img--wrap"><img src="/img/main1.png" /></div>
          </swiper-slide>
          <swiper-slide class="visual--img">
            <div class="img--wrap"><img src="/img/main2.png" /></div>
          </swiper-slide>
          <swiper-slide class="visual--img">
            <div class="img--wrap"><img src="/img/main3.png" /></div>
          </swiper-slide>
        </swiper>

        <!-- 커스텀 컨트롤 -->
        <div class="swiper-controls">
          <div class="pagination-info">
            <span class="current-slide">{{ currentSlide }}</span> / {{ totalSlides }}
          </div>
          <div class="control-buttons">
            <button @click="toggleAutoplay" class="play-pause-btn">
              {{ isPlaying ? '⏸️' : '▶️' }} ?
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination, Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  const mainSwiperRef = ref(null)
  const swiperInstance = ref(null)
  const currentSlide = ref(1)
  const totalSlides = ref(0)
  const isPlaying = ref(true)

  const modules = [Navigation, Pagination, Autoplay]

  const onSwiper = (swiper) => {
    swiperInstance.value = swiper
    totalSlides.value = swiper.slides.length
    swiper.on('slideChange', () => {
      currentSlide.value = swiper.activeIndex + 1
    })
  }

  const toggleAutoplay = () => {
    if (swiperInstance.value) {
      if (isPlaying.value) {
        swiperInstance.value.autoplay.stop()
      } else {
        swiperInstance.value.autoplay.start()
      }
      isPlaying.value = !isPlaying.value
    }
  }
</script>