nativescript-ngx-slides pageIndicators not showing

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

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?

Jan 10 '17 12:01 zoeitsolutions

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

Jan 11 '17 09:01 YvesCandel

Me too.

Jan 21 '17 00:01 smarza

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

Jan 21 '17 10:01 zoeitsolutions

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.

Jan 23 '17 21:01 smarza

@smarza I'll fix this tonight.

Jan 24 '17 12:01 JoshDSommer

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

Jan 24 '17 12:01 smarza

@TheOriginalJosh was this fixed?

Feb 01 '17 06:02 zoeitsolutions

I am experiencing this problem on version 0.0.9.

Feb 16 '17 15:02 pette9

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

Mar 21 '17 06:03 gauravbabu74

Same issue here!

May 17 '17 13:05 cmeijerink

I'll look into this tonight

May 18 '17 12:05 JoshDSommer

@TheOriginalJosh any update on this issue

May 24 '17 06:05 Jaishankarb

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

May 24 '17 11:05 JoshDSommer

any update on this issue?

Jun 12 '17 19:06 dobjek

same problem here...

Jun 12 '17 19:06 ivanwitzke

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.

Jun 20 '17 23:06 JoshDSommer

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

Jun 21 '17 15:06 carlosanjos

@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.

Jun 21 '17 15:06 JoshDSommer

@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;
}

screen shot 2017-06-21 at 16 53 38

Jun 21 '17 15:06 carlosanjos

@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?

Jun 21 '17 16:06 JoshDSommer

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

Jun 23 '17 02:06 dobjek

@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?

Jun 23 '17 11:06 JoshDSommer

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.

Jun 23 '17 12:06 sittingbool

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

Jun 23 '17 12:06 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.

Jun 23 '17 12:06 JoshDSommer

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.

Jun 26 '17 07:06 sittingbool

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

Jun 26 '17 11:06 JoshDSommer

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.

Jun 26 '17 11:06 sittingbool

@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.

Jun 28 '17 00:06 JoshDSommer

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

Jun 28 '17 03:06 dobjek

nativescript-ngx-slides nativescript-ngx-slides copied to clipboard

pageIndicators not showing

nativescript-ngx-slides
nativescript-ngx-slides copied to clipboard