Marquee 슬라이드 구현하기

마퀴 슬라이드를 구현하는 방법 기록

---

1. 마퀴 슬라이드 컴포넌트 구조

먼저, MarqueeSlide.vue 파일의 구조를 살펴보겠습니다. 이 컴포넌트는 vue-marquee-slider를 사용하여 이미지를 연속적으로 이동시키는 슬라이드를 구현합니다.

<template>
  <div>
    <vue-marquee-slider
      id="marquee-slider-loop"
      :speed="80000"  <!-- 슬라이드 이동 속도 설정 -->
      :space="100"   <!-- 이미지 간 간격 설정 -->
      :paused="handlePlay"  <!-- 슬라이드 재생/정지 상태 제어 -->
    >
      <div
        class="marqueeImage"
        v-for="(item, index) in bgImage"
        :key="index"  <!-- 반복 요소에 고유 키 부여 -->
        :style="{ 'background-image': `url(${item.url})` }"  <!-- 인라인 스타일로 배경 이미지 설정 -->
        @mouseover="handlePlay = true"  <!-- 마우스 오버 시 슬라이드 정지 -->
        @mouseout="handlePlay = false"  <!-- 마우스 아웃 시 슬라이드 재생 -->
      ></div>
    </vue-marquee-slider>
  </div>
</template>

<script>
export default {
  name: "MarqueeSlide",
  data() {
    return {
      bgImage: [
        // 이미지 URL 배열
        { url: "./assets/images/marqueeSlide/marquee-1.webp" },
        { url: "./assets/images/marqueeSlide/marquee-2-cropped.webp" },
        // 생략
      ],
      handlePlay: false, // 슬라이드 재생/정지 상태
    };
  },
  methods: {
    stopSlider() {
      this.handlePlay = true; // 슬라이드 정지
    },
    startSlider() {
      this.handlePlay = false; // 슬라이드 재생
    },
  },
};
</script>

<style lang="scss" scoped>
#marquee-slider-loop {
  display: flex;
  overflow: hidden;
  padding: 2rem 0;
  margin: 80px auto;
  justify-content: center;
  align-items: center;
}

.marqueeImage {
  flex: 0 0 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px 8px 8px 0;
  transition: 0.5s all ease-in-out;

  &:nth-child(2n) {
    height: 300px;
  }
  &:nth-child(2n + 1) {
    height: 200px;
    margin-top: 50px;
  }

  &:hover {
    transform: scale(1.1);
  }
}
</style>

vue-marquee-slider 컴포넌트를 사용하여 슬라이드를 구현하고, 이벤트와 메소드를 통해 슬라이드를 제어하는 것입니다. 또한, v-for를 사용하여 이미지를 반복 렌더링하고, mouseover와 mouseout 이벤트를 통해 슬라이드의 재생/정지를 제어하는 방법을 다뤘습니다~