Reputation: 233
How can I create carousel with nativescript-vue? I can create couple of single components such as welcome1.vue, welcome2.vue with a button and animation, but I have no idea how can I add the dots to make it real carousel/introduction flow. I know there is an NS plugin for it, but I'm not sure how can I integrate it into vue project.
Any help would be appreciated!
Upvotes: 1
Views: 2144
Reputation: 86
Use https://github.com/manijak/nativescript-carousel
npm install nativescript-carousel
Then run
rm -rf platforms
Register the plugin in your app
Open your app.js
or main.js
and add the following line at the top:
Vue.registerElement('Carousel', () => require('nativescript-carousel').Carousel)
Vue.registerElement('CarouselItem', () => require('nativescript-carousel').CarouselItem)
Put this into your vue component:
Remember to warp the <Carousel>
inside a <GridLayout>
if you're Android.
<Carousel height="100%" width="100%"
pageChanged="myChangeEvent" pageTapped="mySelectedEvent"
indicatorColor="#fff000" finite="true" bounce="false"
showIndicator="true" verticalAlignment="top"
android:indicatorAnimation="swap" color="white"
>
<CarouselItem id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label text="Slide 1" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
<CarouselItem id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center"/>
</CarouselItem>
</Carousel>
then run tns run android --bundle
Upvotes: 7
Reputation: 21908
Did you try nativescript-pager, it has official support for Vue and got a demo app too.
Upvotes: 0