[onsen-ui] 6. carousel - 캐러셀[회전]

 

온센 ui에서 

다른것도 다 좋지만

 

회전 ui를 직접 커스텀 할 수 있다는게 최대의 장점이 아닐까 생각한다. 

vue에서 제공하는 다른 좋은 탬플릿도 많지만 

 

내 입맛에 맞춰서 커스텀 하기에는 조금 힘든 면이 있다. 

 

온센은 뭔가 다른 탬플릿 보다 커스텀하기가 쉽다. 

 

그럼 우선 기본적인 사용방법과 응용 방법을 알아보자

 

기본 구조

    <v-ons-carousel 
    	fullscreen 
        swipeable 
        auto-scroll 
        overscrollable :index.sync="carouselIndex">
      <v-ons-carousel-item v-for="(value, key) in items">
        <div>carousel content</div>
      </v-ons-carousel-item>
    </v-ons-carousel>

 

carousel 안에 carousel-item을 넣어서 

각각의 아이탬이 화면으로 작동 되어 스와이프 혹은 버튼 이벤트를 통해서 슬라이드 이동이 가능하다. 

 

스타일을 직접 넣어서 사용되어 있지만

클래스를 줘서 덮어 씌울 수 도 있다. 

 

홈페이지의 예제는 페이지 전체를 하지만

부분적으로 카드 모양 혹은 하나의 영역을 슬라이드로 바꿀 수 있다. 

 

난 전체를 잡아먹는 캐러셀(carousel) 보다

카드 형식의 모양을 만들고 싶었다. 

 

일반적인 모습이 이런 모습이라면

coursel full

 

내가 원하는 모습은

carouse card

 

이런 모습이랄까..

 

이런 모습을 하기 위해선 부모 요소와 자식 요소에 간단한 css만 넣어주면 된다. 

 

 

// componenet
<div class="card">
	<p>card card</p>
	<v-ons-carousel
		class="carousel-card__block"
		:index.sync="cardIndex"
		swipeable
		auto-scroll>
		<v-ons-carousel-item
			class="carousel-card__item"
			v-for="(img, key) in images"
			:key="key">
			<img :src="img" alt="image" />
		</v-ons-carousel-item>
	</v-ons-carousel>
</div>



// scss 
.card {
	width: 100%;
	&__block {
		width: 100%;
		padding: 0 20px;
	}
	&__item {
		padding: 0 10px;
		img {
			width: 100%;
		}
	}
}

 

 

다른 vue carousel을 찾는다면 

여기를 참조하자.

vuejsexamples.com/tag/carousel/

 

 

ps. git으로 만들었는데 

다 만들려고 하다 귀찮아 져서 

그냥 만들다 말았습니다. 

carousel은 있습니다. !!

github.com/wmsdsd/onsen-sample

 

 

참조 : https://onsen.io/v2/api/vue/v-ons-carousel.html