greenwhale/app/components/marqueeContent.vue

<template>
  <section class="main--content--wrap gray--type">
    <div class="swiper--container">
      <div class="title--wrap">
        <h3 class="green--title">
          Partners
        </h3>
        <h2 class="mb-[28px]">국내외 주요 기업과 단체가 <br/> 그린웨일글로벌과 함께 하고 있습니다.</h2>
        <div class="black--btn--wrap mb-[40px]">
          <NuxtLink class="black--btn" to="/company/partners">더보기<i class="ico"></i></NuxtLink>
        </div>
      </div>
      <div class="marquee--wrap">
        <Vue3Marquee :duration="50" :pauseOnHover="true">
          <div class="logo--wrap">
            <img src="/img/logo1.svg" alt="emis" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo2.svg" alt="Fab 365" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo3.svg" alt="LG디스플레이" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo4.svg" alt="현대" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo5.svg" alt="신세계" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo6.svg" alt="Acecook" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo1.svg" alt="emis" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo2.svg" alt="Fab 365" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo3.svg" alt="LG디스플레이" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo4.svg" alt="현대" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo5.svg" alt="신세계" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo6.svg" alt="Acecook" />
          </div>
        </Vue3Marquee>

        <Vue3Marquee :duration="50" direction="reverse" :pauseOnHover="true">
          <div class="logo--wrap">
            <img src="/img/logo7.svg" alt="CJ HDC biosol" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo8.svg" alt="WONLIM" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo9.svg" alt="otterBox" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo10.svg" alt="투디엠" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo11.svg" alt="MARIBUMI Starchtech" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo12.svg" alt="STAND OIL" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo7.svg" alt="CJ HDC biosol" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo8.svg" alt="WONLIM" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo9.svg" alt="otterBox" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo10.svg" alt="투디엠" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo11.svg" alt="MARIBUMI Starchtech" />
          </div>
          <div class="logo--wrap">
            <img src="/img/logo12.svg" alt="STAND OIL" />
          </div>
        </Vue3Marquee>
      </div>
    </div>
  </section>
</template>

<script setup>
import { Vue3Marquee } from 'vue3-marquee'
</script>