Ionic-framework: Cannot nest slides in slides

Created on 25 Nov 2016 · 7Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ x ] 2.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I wanted to nest an ion-slides component inside an ion-slide component, only to find the slide where it was expected to be some slides were flushed white.

Expected behavior:

A slides component is nested within a slide.

Steps to reproduce:

Related code:

<ion-slides [options]="{loop:true,autoplay:4000}">
    <ion-slide>
        <img src="assets/img/a.jpg" alt="image" />
    </ion-slide>
    <ion-slide>
        <ion-slides [options]="{loop:true,autoplay:4000,direction:'vertical'}">
            <ion-slide>
                <img src="assets/img/a.jpg" alt="image" />
            </ion-slide>
            <ion-slide>
                <img src="assets/img/a.jpg" alt="image" />
            </ion-slide>
        </ion-slides>
    </ion-slide>
</ion-slides>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.3.1

Source

infinnie

All 7 comments

i run into the same issue couple of days ago.
made it work somehow but i dont think i'll keep it since it is too fragile and unstable for now.

comfortme on 25 Nov 2016

@comfortme Your solution please…

infinnie on 26 Nov 2016

ok your template is fine, this does the trick

ion-slide {
        display: block!important;
    }

but resizing on browser or orientation change or keyboard show/hide messes up the slides.

comfortme on 26 Nov 2016

👍1

I have the same problem. I believe it is a race condition where sometimes the outer slides component registers the slides of the inner slides component as belonging to itself.

It looks like the error is that the slides component should take care of only handling slides that are direct children of itself.

jonasmunk on 18 Apr 2017

Hello, all! I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/10542.

jgw96 on 24 Apr 2017

👎1

@jgw96 this issue is the earlier one.

infinnie on 25 Apr 2017

👎1

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.