CODEWITHSUNDEEP
carouselnativescriptnativescript-vue
arena
arena

Reputation: 233

Carousel with nativescript-vue

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

Answers (2)

ding_ding
ding_ding

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

Manoj
Manoj

Reputation: 21908

Did you try nativescript-pager, it has official support for Vue and got a demo app too.

Upvotes: 0

Related Questions