반응형
다음은 이 글의 동영상 강좌입니다.
연재 마지막 순서로 첫화면에 이미지 슬라이드를 같이 개발합니다.
우선 관리자에서 이미지를 5개 정도 업로드합니다.
이미지 슬라이드는 Bootstrap-vue의 Carousel 컴퍼넌트를 사용합니다.
https://bootstrap-vue.org/docs/components/carousel
BootstrapVue
Quickly integrate Bootstrap v4 components with Vue.js
bootstrap-vue.org
Carousel 소스를 복사하여 다음과 같이 수정합니다.
pages/index.vue
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<div v-for="slider in sliders" v-bind:key="slider.id">
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
:img-src="slider.imageUrl"
></b-carousel-slide>
</div>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data() {
return {
sliders: '',
slide: 0,
sliding: null
}
},
computed: {
accessToken() {
return this.$store.state.accessToken;
}
},
mounted() {
this.getSliders();
},
methods: {
async getSliders(){
const options = {
headers: {
Authorization: `Bearer ${this.accessToken}`
}
}
const path = '/slider';
await this.$axios.get(
path,
options
).then(response=> {
this.sliders = response.data;
console.log(this.sliders);
}).catch(error => {
console.log(error);
})
},
onSlideStart(slide) {
this.sliding = true
},
onSlideEnd(slide) {
this.sliding = false
}
}
}
</script>서버를 실행하면 다음과 같이 화면이 스크롤 됩니다.
이렇게 해서 이미지 슬라이드가 완성되었습니다.
Vue와 Nestjs를 공부하시는 분들에게 도움이 되었으면 좋겠습니다.
수고하셨습니다^^
반응형
'Nestjs 활용 동영상강좌' 카테고리의 다른 글
| [Nestjs] TypeORM Multiple Database Connection 설정 및 사용법 (0) | 2024.09.15 |
|---|---|
| Nestjs 프로젝트를 Docker로 배포하기 (2) | 2022.12.30 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 11.이미지 조회 및 삭제 (0) | 2022.12.18 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 10.업로드 파일 DB 저장 (0) | 2022.12.11 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 09.Front에서 S3에 파일 업로드하기 (0) | 2022.10.23 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 08.AWS S3 설정 (0) | 2022.10.22 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 07.사용자 권한 관리 (0) | 2022.10.15 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 06.Front 로그인 (with Jwt Token) (0) | 2022.10.03 |
