vue.js - vue-awesome-swiper loop options 오류 2탄

문제 - option : loop 시 복제되는 duplicate 영역 이슈

지난번 글 hjh0827.tistory.com/59 에서 사용했던 vue-awesome-swiper로 스와이퍼를 적용했는데 문제가 있었다.

 

문제1 - duplicate이 초기 slide 화면으로 노출되는 현상

해결법 - hjh0827.tistory.com/60 참고

 

문제2. duplicate에 click 이벤트가 적용 안되는 현상

해결법 - swiper 영역에 @click-slide 를 이용하여 duplicate 영역 click 이벤트 적용

 

소스

<swiper ref="mySwiper" class="swiper" :options="swiperOption" @click-slide="clickSlide">

methods: {
    clickSlide(index, reallyIndex){
      console.log('index : ' + index + ' : reallyIndex : ' + reallyIndex)
    }
  },

테스트

 

 

문제3. duplicate 영역에 링크 2개 이상 적용

해결법 - 찾지 못함..

(* loop 적용하면서 생성되는 duplicate 영역에 click 이벤트를 주는 방법 아시는분 댓글 부탁드립니다)

 

소스

<template>
  <swiper ref="mySwiper" class="swiper" :options="swiperOption">
    <swiper-slide v-for="(item, index) in test" :key="index">
      <button class="button1" @click="button1Click(index)">button1 {{ item.a }}</button>
      <div> :: </div>
      <button class="button2" @click="button2Click(index)">button2 {{ item.a }}</button>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import 'swiper/swiper-bundle.css' // import style (>= Swiper 6.x)
import "swiper/css/swiper.css"; // import style (<= Swiper 5.x)

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper2() {
      return this.$refs.mySwiper.$swiper
    }
  },
  created() {
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        this.test.push({ a: "a" + i });
      }
    }, 1000);
    setTimeout(() => {
      this.swiper2.slideTo(2, 1000, false);
    }, 3000);
  },
  data() {
    return {
      test: [],
      swiperOption: {
        slidesPerView: 1.8, //화면에 slide 노출 개수
        slidesPerGroup: 1, //swiper 시 개수
        spaceBetween: 10, //간격
        centeredSlides: true, //현재 slide 중앙정렬
        loop: true, // loop 여부
        loopedSlides: 2, //loop 시 duplicate 개수
      },
    };
  },
  methods: {
    clickSlide(index, reallyIndex){
      console.log('index : ' + index + ' : reallyIndex : ' + reallyIndex)
    },
    button1Click(index){
      console.log('button1Click : ' + index )
    },
    button2Click(index){
      console.log('button2Click : ' + index )
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.scss";
</style>

테스트

 

 

결론

결국 swiper에서 loop를 이용한 영역 멀티 링크는 해결하지 못했다. 다음 포스팅에선 slick을 이용하여 개발 진행해보도록 하겠습니다.