pageIndicators not showing

[zoeitsolutions]

Thanks for the plugin, I can't get the pageIndicators to show.

I followed the readme:

Indicators

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

I simply copied and pasted those into my slide.component.css file (which holds other classes for the component).

The other classes do pick up, I have tried setting the page bg to white or dark colours, but I still can't see any dots.

slide.component.html

`

<StackLayout col="0" row="1">
    <Button
    text="Get Started"
    class="submit-button h2"
    height="80"
    (tap)="goToLogin()"></Button>
</StackLayout>

`

I have tried with and without the gridlayout / button at the bottom of the page. I have also tried increasing the size of the pageIndicators and removing opacity without any luck.

Thoughts?

[YvesCandel]

I'm having the same problem. Can't get them to show in any way.

[smarza]

Me too.

[zoeitsolutions]

@TheOriginalJosh please let me know if you are able to fix this or advise what the problem might be.

[smarza]

If I set <slides [pageIndicators]="true">, i get the following error:

JS: clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative.

Does anyone have any idea how to fixed this issue ?

Thanks in advance.

[JoshDSommer]

@smarza I'll fix this tonight.

[smarza]

@TheOriginalJosh Thanks. If there is anything I can help or contribute, please let me know.

[zoeitsolutions]

@TheOriginalJosh was this fixed?

[pette9]

I am experiencing this problem on version 0.0.9.

[gauravbabu74]

I'm having the same problem. Can't get them to show in any way.

[cmeijerink]

Same issue here!

[JoshDSommer]

I'll look into this tonight

[Jaishankarb]

@TheOriginalJosh any update on this issue

[JoshDSommer]

@Jaishankarb not yet, I haven't had much free time to dedicate to it unfortunately.

[dobjek]

any update on this issue?

[ivanwitzke]

same problem here...

[JoshDSommer]

these should be working now for android and ios version 1.4. going to close this one. if you have any problems don't hesitate to open back up.

[carlosanjos]

Sorry @TheOriginalJosh I've just updated to 0.1.4 and the indicators are still now showing, for both iOS and Android.

[JoshDSommer]

@carlosanjos page indicators are not on by default. You will need to make to set the property pageIndicators to true like this:

    <slides loop="true" [pageIndicators]="true">
        <slide class="slide-1">
            <Label text="Slide 1" textWrap="true"></Label>

and then add styling for them in your app.css or component css.

    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

without both of these steps. page indicators won't display.

[carlosanjos]

@TheOriginalJosh I'm using the following code and it doesn't work. Thanks for the fast reply.

<slides [loop]="false" [pageIndicators]="true" class="slide-bg">
    <slide class="slide-1"><Label text="Heading 1" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
    <slide class="slide-2"><Label text="Heading 2" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
    <slide class="slide-3"><Label text="Heading 3" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
</slides>

.slide-1{
    background-color: darkslateblue;
}
.slide-2{
    background-color: darkcyan;
}
.slide-3{
    background-color: darkgreen;
}
Label{
    text-align: center;
    width: 100%;
    font-size: 35;
    margin-top: 35;
    color: red;

}

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

[JoshDSommer]

@carlosanjos I just tested your code on an android emulator and I'm seeing the background color and the slide indicators. I'm not on a mac at the moment so I can't test on an ios emulator. but it seems that the background colors are not showing up correctly for you. maybe try changing them to a hexadecimal color like #000?

[dobjek]

Doesn't show for me either. I have image as the component's background, might that be a problem?

[JoshDSommer]

@dobjek it very well could be the image. that is something I haven't really thought of . if you put the default code in from the README do the indicators show up?

[sittingbool]

I just started the demo project, added the styles to the app.css but no indicators showing up. (set the property to true of course). Running on iOS.

[JoshDSommer]

@sittingbool make sure you set the pageIndicators property to true in the slides component <slides [pageIndicators]="true" class="slide-bg">

[JoshDSommer]

@sittingbool alternatively it could be an issue with the slides being generated in a ngFor loop in the demo project. you may want to try have the slides statically defined and see if that works.

[sittingbool]

I had this property on true, I also had a colored background. But still not showing. Also I tried doing the slides manually, because that would be my use case. Didn't work. If I find the time I will work on this and give you a pull request. Tell me if you find the time to have a look.

[JoshDSommer]

@sittingbool What version of NativeScript and Angular are you running?

[sittingbool]

The latest NativeScript (3.0.3) and Angular like in the package.json of the demo App. I used the demo App provided by this repository. I downloaded as a zip, changed the absolute path to the slides-project into a relative path, added [pageIndicators]="true", the css like in the readme and ran it with tns run ios. No indicators visible. Then I added background-color but still: no indicators visible.

[JoshDSommer]

@sittingbool one thing you may want to try doing is setting the margin-top property to a lower or negative number. the positioning top seems to be inconsistent and I'm going to need to work on it.

[dobjek]

i believe this is why we are not seeing those pageIndicators: https://github.com/NativeScript/nativescript-angular/issues/769

[dobjek]

so, temp workaround is to put .slide-indicator-inactive and .slide-indicator-active to your app.css

[ivanwitzke]

For me it 'kinda' works with the code like this (and css as the doc examples on my app.css):

<GridLayout rows="10, auto" columns="50, auto">
    <Label text="Photos" row="0" col="0"></Label>
    <StackLayout row="1" colSpan="2">
        <slides [pageIndicators]="true">
            <slide *ngFor="let photo of product.photos" class="slide-bg">
                <FrescoDrawee [imageUri]="photo" height="250" actualImageScaleType="fitCenter"></FrescoDrawee>
            </slide>
        </slides>
    </StackLayout>
</GridLayout>

but the result is like the images below...

[JoshDSommer]

@ivanwitzke Thank you for the info. this makes sense since i'm calculating the position of the indicators based on the view height not the height of the slides themselves. going to have to go back to the drawing board on this I think.

[ivanwitzke]

Also, if it's inside a ScrollView the bullets appear too, but need to scroll a little bit...

Em dom, 9 de jul de 2017 10:54, Josh Sommer notifications@github.com escreveu:

@ivanwitzke https://github.com/ivanwitzke Thank you for the info. this makes sense since i'm calculating the position of the indicators based on the view height not the height of the slides themselves. going to have to go back to the drawing board on this I think.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/TheOriginalJosh/nativescript-ngx-slides/issues/5#issuecomment-313921244, or mute the thread https://github.com/notifications/unsubscribe-auth/AEM96ct4PPgUy7w_a4Inp_QjG_ZVD18Gks5sMNt7gaJpZM4LfXaD .

[KBorecki]

Hey @TheOriginalJosh is there any update of this issue?

[JoshDSommer]

@KBorecki , @dobjek made a PR (https://github.com/TheOriginalJosh/nativescript-ngx-slides/pull/28) to fix this a while ago and I've currently published it under a beta tag. You can install it with npm install nativescript-ngx-slides@beta. any feed back would be helpful.

[ivanwitzke]

Unfortunatelly for me nothing has changed... If the device is on vertical, the indicators won't show, but if I rotate to horizontal, then they appear. The basic structure of the view is:

StackLayout -> ScrollView -> CardView -> GridLayout -> StackLayout ->

<slides [pageIndicators]="true">
    <slide *ngFor="let photo of product.photos" class="slide-bg">
        <FrescoDrawee [imageUri]="photo" height="250" actualImageScaleType="fitCenter"></FrescoDrawee>
    </slide>
</slides>

[JoshDSommer]

@ivanwitzke this is installed from the beta tag? npm install nativescript-ngx-slides@beta?

[ivanwitzke]

@TheOriginalJosh yes... but I just noticed that after installing from the beta tag (npm install nativescript-ngx-slides@beta), the console shows

/the/path/to/my/project
└── nativescript-ngx-slides@0.3.1

is this correct?

[JoshDSommer]

@ivanwitzke yep that is correct. Thanks for the info.

[ivanwitzke]

After setting the pageHeigth property in the <slides> the indicators show now, but if I rotate the device, then rotate it back, they won't show until I navigate away and come back to the page...

<slides [pageIndicators]="true" pageHeight="350">
    [more code here...]
</slides>

[sittingbool]

Now setting a negative top margin for the slide-indicator-inactive and slide-indicator-active classes shows the indicators on ios, while a zero top margin shows it on android. i suggest to use an absolute positioning to make sure its on top of the slides as well.

[nikunjgajera]

I have same issues, I cant get page indicator

slides.html

<slides [pageIndicators]="true" id="slides" #slides pageHeight="420">
    <slide *ngFor="let page of noOfPage">

        <StackLayout >
            <GridLayout rows="*,*,*,*,*,*" cols="10,16,16,16,16,16,10" >
            [Some Code....]
            </GridLayout>
      </StackLayout>
    </slide>
</slides>

slides.component.ts

export class SlidesComponent implements OnInit {
    players : Array<Player> = [];
   constructor(private router: Router, private page: Page) {
    }
    @ViewChild("slides") slides: ElementRef;
    ngOnInit() {
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://hurling";
    }
    handlePlayer() {
        //Call api and get data
        this.players = data;
    }    
   ngAfterViewInit() {

        this.handlePlayer();
    }
}

slides.common.css

.slide-indicator-inactive{
    background-color: #000;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #000;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

how can i get page indicator?

[heese]

I had also problems with the page indicators. They are perfectly fine when starting the app. However, they disappeared when resuming my app from the background.

I had to change the code of the plugin to make it work. I found that setting the top margin does funny stuff when resuming from background. I did not investigate why. I changed the following line in buildFooter() from footerSection.marginTop = this.footerMarginTop; to footerSection.top = this.footerMarginTop;

For my app I changed also the formula for computing marginTop (otherwise the footer was too low when setting pageHeight). New formula is return pageHeight - (pageHeight / 6) - this.FOOTER_HEIGHT / 2;

I have not tested if the above formula works also for other page heights.

Here is another fix I applied to make page indicators working on Android. I added another StackLayout around the label. The new template is

<StackLayout *ngIf="pageIndicators" #footer style="width:100%;" orientation="horizontal">
    <StackLayout *ngFor="let indicator of indicators">
        <Label [class.slide-indicator-active]="indicator.active == true"
               [class.slide-indicator-inactive]="indicator.active == false"></Label>
    </StackLayout>
</StackLayout>

I haven't tested if it would work without the additional stack layout after applying the margin fix.

Still waiting for a spare time-slot to create a pull request and do more testing :-|

[anuragd7]

I too faced quite a few problems in making the page indicators appear. Finally, I experimented with different values of pageHeight and footerMarginTop properties and what worked for me was:

<GridLayout  rows="50% *" >
        <slides row="0" [pageIndicators]="true" pageHeight="80%" footerMarginTop="70%">

[vahidvdn]

I just added theses css codes in my app.android.css:

.slide-indicator-inactive{
    background-color: #000;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #000;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

This must be mentioned in the docs.

[vahidvdn]

Also you must set footerMarginTop property to something less than 100%. For example:

footerMarginTop="80%"

[KirilOkun]

Setting .slide-indicator-inactive and .slide-indicator-active margin-top: -1; and <slides ... pageHeight="100%"> worked for me. The indicators showed up but at the top of the page above the slides. Better than nothing i suppose.