[Vue.js] Swiper 슬라이드 적용하기 (Ver6)

[ 작업환경 ]

    "swiper": "6",
    "vue": "^3.2.13",
    "vue-router": "^4.2.4",
    "webpack": "5.0.0"

 

Swiper (슬라이드 기능) 구현할때 보통의 경우 CDN 방식으로 Javascript 소스상으로 간단히 작업을 할 수 있다.

https://swiperjs.com/swiper-api

Swiper - The Most Modern Mobile Touch Slider

 

그런데, Vue.js 로 작업하면서 기존의 CDN 방식으로는 연동되지 않았다.

결국 Swiper 에서 제공하는 별도의 Vue 패키지를 설치하고 제공하는 API 와 속성들로 작업을 해야했다.

 

필자의 경우 Swiper 6에서 부터 7,8.. 최신 10버전까지 모두 깔고 테스트하고 지우고를 반복하여 돌려보았지만, 버전6이 정상동작하였다.

 

이러한 자세한 부분은 아래 bellmir 님의 포스팅 글을 참고하기 바란다.

https://bellmir.tistory.com/34

Vue3에서 swiper 쓰는법 (오류 해결법)

 

[ 버전6으로 swipter 설치하기 ]

npm install swiper@6

 

 

https://v6.swiperjs.com/vue

Swiper Vue.js Components

v6 의 API 내에 기능 설명이 조금 부족할때는, 아래의 최신버전의 API 내용을 같이 보면서 속성과 이벤트 참고하면 좋다.

 

https://swiperjs.com/vue

Swiper - The Most Modern Mobile Touch Slider

 

 

1. Navigation , Pagination 기능 적용

 

 

<template>
    <swiper id="mainVisual"  ref="mySwiper" :loop="true" navigation :pagination="{ clickable: true }" >
        <swiper-slide>
            <div class="swiper-slide">
                    <p class="ii tit i01">더 큰 세상과의 소통, <img src="images/main/logo_main_visual.png" class="logo" alt="" />
            </div>         
        </swiper-slide>
        <swiper-slide>
            <div class="swiper-slide slider02">
                    <p class="ii tit i01">English for Everyday <br class="mVar" />Activities</p>
            </div>            
        </swiper-slide>
        <swiper-slide>
            <div class="swiper-slide">
                    <p class="ii tit i01">해외연수 중 필요한 생활영어 <br class="mVar" />고민이 해결됐어요</p>
            </div>            
        </swiper-slide>
    </swiper>
</template>
 
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
 
 
import SwiperCore, { Autoplay,Navigation, Pagination } from "swiper";
SwiperCore.use([ Autoplay,Navigation, Pagination ]);
 
export default {
    components: {
        Swiper,
        SwiperSlide
    },
    methods: {},
}
</script>

<swiper> 태그 열고 닫고 부분이다. 

주의할점은 <swiper> 태그와 그안에 <swiper-slide> 하위 태그들 사이에 별도의 커스텀 태그를 삽입하면 Error 가 난다.

이를 꼭 주의해서 코딩하자.

<swiper> 태그내에서 직접 속성값으로 지정하면 된다. 

 

:loop="true"  (무한반복)

navigation (네비게이션 나오게)

:pagination="{ clickable: true }" (페이징 기능나올때 클릭가능하도록)

 

 

2. Navigation 있고, 무한Loop 돌도록, 한화면에 3개씩 한꺼번에 보도록

 

 

<template>
    <swiper class="talkit_swiper" :loop="true" :loopedSlides="3" navigation data-aos="fade-up" data-aos-delay="100">
            <swiper-slide><div class="swiper-slide"><img src="images/main/img1.png" alt="" /></div></swiper-slide>
            <swiper-slide><div class="swiper-slide"><img src="images/main/img2.png" alt="" /></div></swiper-slide>
            <swiper-slide><div class="swiper-slide"><img src="images/main/img3.png" alt="" /></div></swiper-slide>
    </swiper>
</template>
 
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
 
 
import SwiperCore, { Autoplay,Navigation, Pagination } from "swiper";
SwiperCore.use([ Autoplay,Navigation, Pagination ]);
 
export default {
    components: {
        Swiper,
        SwiperSlide
    },
    methods: {},
}
</script>

 

:loopedSlides="3"  (loop 되는 아이템들이 한 화면에 3개씩 나오도록)

 

 

3. Navigation , Pagination 기능 적용하는데, 슬라이드 auto로 연속으로 계속 돌도록 등등

 

 

 

<template>
<div id="mainReview" class="f0">
    <div class="review_swiper_area" data-aos="fade-up" data-aos-delay="100" >
 
        <swiper class="review_swiper" :loop="true" :slidesPerView="'auto'" 
        :space-between="70" :centeredSlides="true" :autoplay="true" 
        :navigation="{nextEl:'.swiper-button.swiper-button-prev', prevEl:'.swiper-button.swiper-button-next'}"
        :pagination="{ clickable: true }">
 
 
            <swiper-slide>
                <p class="thumb"><img src="images/main/img_review01.jpg" alt=""></p>
            </swiper-slide>
 
            <swiper-slide>
                <p class="thumb"><img src="images/main/img_review02.jpg" alt=""></p>
            </swiper-slide>
 
            <swiper-slide>
                <p class="thumb"><img src="images/main/img_review03.jpg" alt=""></p>
            </swiper-slide>
        
        </swiper>
 
        <div class="swiper-pagination"></div>
        <div class="swiper-button swiper-button-prev">←</div>
        <div class="swiper-button swiper-button-next">→</div>
 
    </div>
</div>
</template>
 
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
 
 
import SwiperCore, { Autoplay,Navigation, Pagination } from "swiper";
SwiperCore.use([ Autoplay,Navigation, Pagination ]);
 
export default {
    components: {
        Swiper,
        SwiperSlide
    },
    methods: {},
}
</script>
 
 

 

:slidesPerView="'auto'" (  슬라이드 개수를 해상도에 따라 자동으로 지정 )

:centeredSlides="true" ( 센터화면으로 나오게 )

:navigation="{nextEl:'.swiper-button.swiper-button-prev', prevEl:'.swiper-button.swiper-button-next'}" 

 (  Navigation 을 특정 css class 로 지정 )

 

 

 

실행은 

npm run serve 나 yarn serve 형태로 설치환경에 따라 돌려보면 된다.