【Nuxt.js】vue-awesome-swiper를 도입
소개
Nuxt.js에서 만들고있는 사이트에서 슬라이드 쇼를 도입하고 싶었기 때문에 vue-awesome-swiper
를 도입 해 보았습니다.
소개
1. 라이브러리 설치
문서 루트npm install [email protected] vue-awesome-swiper
(추기)
Swiper의 버전을 6계라면 페지네이션등이 잘 동작하지 않았기 때문에, 명시적으로 5계를 인스톨 하도록 했습니다. 공식에서도 추천되었습니다.
2. 플러그인에 추가
plugins/vue-awesome-swiper.js 만들기
plugins/vue-awesome-swiper.jsimport Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
3.nuxt.config.js에 추가
nuxt.config.jsbuild: {
vendor: ['vue-awesome-swiper']
},
plugins: [
{ src: '@/plugins/vue-awesome-swiper.js', ssr: false }
],
이상으로 도입은 완료입니다.
사용
시험에 index.vue에 구현
index.vue<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>スライダー1</swiper-slide>
<swiper-slide>スライダー2</swiper-slide>
<swiper-slide>スライダー3</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
slidesPerView: 1, // 1枚に表示するスライド数
loop: true // 最終ページの次にまた1枚目が表示される
}
};
}
};
</script>
어라?
조사해 보니 css 파일을 읽는 것도 필요했습니다.
plugins/vue-awesome-swiper.js 만들기import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ
// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです
Vue.use(VueAwesomeSwiper);
움직였다~!
결론
우선 최소한입니다만 슬라이더의 도입을 할 수 있었습니다!
커스터마이즈성도 높을 것 같기 때문에 이쪽을 사용해 가고 싶습니다!
참고
【Vue.js】Vue.js(Nuxt.js)로 슬라이더를 도입해 보았다【vue-awesome-swiper】
Nuxt.js 환경에서 Swiper를 도입해 봅니다.
Shopify의 Buy Button 기능 활용 ~2.vue-awesome-swiper를 사용하여 다수의 상품을 슬라이더 표시~
Nuxt에 vue-awesome-swiper를 넣어 슬라이드 쇼 구현
Reference
이 문제에 관하여(【Nuxt.js】vue-awesome-swiper를 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ikeyansaza/items/e242578e5258b4f4098b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. 라이브러리 설치
문서 루트
npm install [email protected] vue-awesome-swiper
(추기)
Swiper의 버전을 6계라면 페지네이션등이 잘 동작하지 않았기 때문에, 명시적으로 5계를 인스톨 하도록 했습니다. 공식에서도 추천되었습니다.
2. 플러그인에 추가
plugins/vue-awesome-swiper.js 만들기
plugins/vue-awesome-swiper.js
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
3.nuxt.config.js에 추가
nuxt.config.js
build: {
vendor: ['vue-awesome-swiper']
},
plugins: [
{ src: '@/plugins/vue-awesome-swiper.js', ssr: false }
],
이상으로 도입은 완료입니다.
사용
시험에 index.vue에 구현
index.vue<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>スライダー1</swiper-slide>
<swiper-slide>スライダー2</swiper-slide>
<swiper-slide>スライダー3</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
slidesPerView: 1, // 1枚に表示するスライド数
loop: true // 最終ページの次にまた1枚目が表示される
}
};
}
};
</script>
어라?
조사해 보니 css 파일을 읽는 것도 필요했습니다.
plugins/vue-awesome-swiper.js 만들기import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ
// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです
Vue.use(VueAwesomeSwiper);
움직였다~!
결론
우선 최소한입니다만 슬라이더의 도입을 할 수 있었습니다!
커스터마이즈성도 높을 것 같기 때문에 이쪽을 사용해 가고 싶습니다!
참고
【Vue.js】Vue.js(Nuxt.js)로 슬라이더를 도입해 보았다【vue-awesome-swiper】
Nuxt.js 환경에서 Swiper를 도입해 봅니다.
Shopify의 Buy Button 기능 활용 ~2.vue-awesome-swiper를 사용하여 다수의 상품을 슬라이더 표시~
Nuxt에 vue-awesome-swiper를 넣어 슬라이드 쇼 구현
Reference
이 문제에 관하여(【Nuxt.js】vue-awesome-swiper를 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ikeyansaza/items/e242578e5258b4f4098b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide>スライダー1</swiper-slide>
<swiper-slide>スライダー2</swiper-slide>
<swiper-slide>スライダー3</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
slidesPerView: 1, // 1枚に表示するスライド数
loop: true // 最終ページの次にまた1枚目が表示される
}
};
}
};
</script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ
// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです
Vue.use(VueAwesomeSwiper);
우선 최소한입니다만 슬라이더의 도입을 할 수 있었습니다!
커스터마이즈성도 높을 것 같기 때문에 이쪽을 사용해 가고 싶습니다!
참고
【Vue.js】Vue.js(Nuxt.js)로 슬라이더를 도입해 보았다【vue-awesome-swiper】
Nuxt.js 환경에서 Swiper를 도입해 봅니다.
Shopify의 Buy Button 기능 활용 ~2.vue-awesome-swiper를 사용하여 다수의 상품을 슬라이더 표시~
Nuxt에 vue-awesome-swiper를 넣어 슬라이드 쇼 구현
Reference
이 문제에 관하여(【Nuxt.js】vue-awesome-swiper를 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ikeyansaza/items/e242578e5258b4f4098b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【Nuxt.js】vue-awesome-swiper를 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ikeyansaza/items/e242578e5258b4f4098b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)