greenwhale/app/components/itemSlide.vue

<template>
  <section class="main--content--wrap">
    <div class="swiper--container">
      <div class="title--wrap">
        <h3 class="green--title">
          Products
        </h3>
        <h2 class="mb-[28px]">그린웨일글로벌의 친환경 바이오플라스틱을 통해 만든 <br />다양한 제품들을 소개합니다.</h2>
      </div>
      <div class="black--btn--wrap mb-[40px]">
        <NuxtLink class="black--btn" to="/products/materials">더보기<i class="ico"></i></NuxtLink>
      </div>
      <div class="item--swiper--wrap">
        <swiper
          ref="itemSwiperRef"
          class="item--swiper"
          loop="true"
          :slides-per-view="4"
          :space-between="20"
          :slides-offset-before="-50"
          :autoplay="{
            delay: 2000,
            disableOnInteraction: false,
          }"
          :breakpoints="{
            '0': {
              slidesPerView: 1.2,
              centeredSlides: true,
              slidesOffsetBefore: '0',
            },
            '768': {
              slidesPerView: 3.1,
              slidesOffsetBefore: '-0',
            },
            '1280': {
              slidesPerView: 4,
              spaceBetween: 20,
              slidesOffsetBefore: '-50',
            }
          }"
          :modules="modules"
        >
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide1.png" /></div>
            <div class="txt--wrap"><h4>Fashion & Cosmetics</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide2.png" /></div>
            <div class="txt--wrap"><h4>Food & Beverage</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide3.png" /></div>
            <div class="txt--wrap"><h4>Household & Smart Living</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide4.png" /></div>
            <div class="txt--wrap"><h4>Electronics & Robotics</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide5.png" /></div>
            <div class="txt--wrap"><h4>Mobility & Construction</h4></div>
          </swiper-slide>
                    <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide1.png" /></div>
            <div class="txt--wrap"><h4>Fashion & Cosmetics</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide2.png" /></div>
            <div class="txt--wrap"><h4>Food & Beverage</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide3.png" /></div>
            <div class="txt--wrap"><h4>Household & Smart Living</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide4.png" /></div>
            <div class="txt--wrap"><h4>Electronics & Robotics</h4></div>
          </swiper-slide>
          <swiper-slide class="item--img">
            <div class="img--wrap"><img src="/img/main--slide5.png" /></div>
            <div class="txt--wrap"><h4>Mobility & Construction</h4></div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </section>
</template>
<script setup>
  import { ref } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  const itemSwiperRef = ref(null)

  const modules = [Autoplay]
</script>