Jae Front-end Study

결과 화면

버전

vue: 2.7.10

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전  3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. 마크업 하기

• pages/swiper.vue

1. 컴포넌트가 아닌 HTML로 마크업 한다. 이때 class명은 swiper 패키지에서 제공하는 것으로 사용한다.
   (swiper-container, swiper-wrapper, swiper-slide)
2. 커스텀으로 autoplay, progress를 만들 것이기 때문에 마찬가지로 HTML로 마크업 한다.
   autoplay 속성의 true/false에 따라서 css가 바뀌어야 하기 때문에 클릭 이벤트와 :class 속성을 추가한다.

<template>
  <section class="kv-swiper">
    <div
      v-once
      v-swiper:swiper="kvSwiperOption"
      class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
      </ul>
    </div>

    <div class="swiper-function">
      <div
        class="swiper-autoplay"
        :class="{ stop: kvAutoplay }"
        @click="kvSwiperAutoplay">
        <span/>
      </div>

      <div
        class="swiper-progress"
        :class="{ start: kvProgress }">
        <span class="bar"/>
      </div>

      <div class="swiper-pagination"/>
    </div>
  </section>
</template>

3. script 작성하기

1. v-once, v-swiper 디렉티브를 사용하기 위해서 vue 컴포넌트를 import 한다.
2. vue-awesome-swiper와 swiper.css를 import 한다.
3. kvAutoplay, kvProgress를 false로 설정한다. (페이지가 로딩되기 전에 동작되면 안 되기 때문에)
4. kvSwiperOption을 작성한다. kvSwiperOption의 on 부분에 autoplay에 관한 메서드를 작성한다.
   (다음 슬라이드로 넘길 때 autoplay와 progress를 초기화하기 위해서)
   스와이퍼의 다양한 속성들을 사용하고 싶으면 공식 문서를 참고한다. (https://swiperjs.com/demos) 
5. autoplay와 progress 동작에 필요한 메서드를 작성한다. 이때 try/catch 구조로 작성해야 한다.

<script>
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

export default {
  name: 'SwiperPage',

  data() {
    return {
      // Kv autoplay, progress
      kvAutoplay: false,
      kvProgress: false,

      // Kv swiper option
      kvSwiperOption: {
        effect: 'fade',
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
          delay: 5000
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        on: {
          init: this.init,
          sliderMove: this.stopAutoplay,
          slideChangeTransitionStart: this.stopAutoplay,
          transitionEnd: this.startAutoplay
        }
      }
    }
  },

  methods: {
    init() {
      this.kvProgress = true
    },

    kvSwiperAutoplay() {
      this.kvAutoplay = !this.kvAutoplay

      if (this.kvProgress) {
        this.stopAutoplay()
      } else {
        this.startAutoplay()
      }
    },

    stopAutoplay() {
      try {
        this.swiper.autoplay.stop()
        this.kvProgress = false
      } catch (err) {
        console.error(err)
      }
    },

    startAutoplay() {
      try {
        this.swiper.autoplay.start()
        this.kvProgress = true
        this.kvAutoplay = false
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

4. css/scss 작성하기

1. progress는 script의 autoplay 속도와 css의 keyframes과 animation 속도에 맞춰 움직일 수 있도록 css를 작성한다. (animation: kvProgress 5s linear infinite;)
2. 스와이퍼에 필요한 css를 작성한다.

<style lang="scss" scoped>
@keyframes kvProgress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.kv-swiper {
  position: relative;
  height: 300px;
  padding: 20px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .swiper-function {
    ...

    .swiper-autoplay {
      position: relative;
      cursor: pointer;

      span {
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 4px;
          height: 12px;
          border-left: 2px solid #fff;
          border-right: 2px solid #fff;
          content: '';
        }
      }

      &.stop {
        span {
          &::after {
            width: 0;
            height: 0;
            border-right: 0;
            border-left: 10px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
          }
        }
      }
    }

    .swiper-progress {
      overflow: hidden;
      width: 300px;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 4px;

      &.start {
        .bar {
          animation: kvProgress 5s linear infinite;
        }
      }

      .bar {
        display: block;
        width: 100%;
        height: 4px;
        transform: translateX(-100%);
        background-color: #fff;
      }
    }

    .swiper-pagination {
      ...
    }
  }
}
</style>

결과 화면

버전

vue: 2.7.10

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전  3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. Swiper, SwiperSlide 컴포넌트 사용하기

• pages/swiper.vue

1. Swiper, SwiperSlide 컴포넌트를 import 한다.
2. swiper.css를 import 한다.
3. <Swiper>와 <SwiperSlier> 컴포넌트를 사용해 마크업을 한다.
   이때 prev, next 버튼과 페이지네이션은 <Swiper> 컴포넌트 밖에 작성한다. (안에 있으면 SwiperSlide와 같이 움직이기 때문에 밖으로 뺀다.)
4. kvSwiperOptions을 작성한다.
   가장 많이 사용하는 속성은 slidesPerView(슬라이드가 몇 개씩 노출되는지), spaceBetween(슬라이드 간의 간격)이고, 이외의 다양한 속성들은 공식 문서를 참고한다. (https://swiperjs.com/demos)
5. swiper.css는 기본적인 스타일만 제공하기 때문에 크기, 배경, 글자, 위치 등은 css를 추가로 작성한다.

<template>
  <section class="kv-swiper">
    <Swiper :options="kvSwiperOptions">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </section>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'SwiperPage',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      kvSwiperOptions: {
        slidesPerView: 2,
        spaceBetween: 20,
        loop: true,
        navigation: {
          prevEl: '.swiper-button-prev',
          nextEl: '.swiper-button-next'
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kv-swiper {
  position: relative;
  height: 300px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    &::after {
      color: #333;
    }
  }

  .swiper-pagination::v-deep {
    bottom: -30px;
    width: 100%;

    .swiper-pagination-bullet {
      margin: 0 5px;
      cursor: pointer;
    }

    .swiper-pagination-bullet-active {
      background-color: #333;
    }
  }
}
</style>