Ion-View inside a slide in a slidebox

I am working on an Ionic app, and want to have a slider box, with each slide representing an ion-view.

Slide Box -

<ion-view>
<ion-content>
    <div class="row">
        <ion-slide-box class="col" auto-play="false" does-continue="false">
            <ion-slide>
                <ion-nav-view name="view-1" ></ion-nav-view>
            </ion-slide>
            <ion-slide>
                <ion-nav-view name="view-2" ></ion-nav-view>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>
</ion-view>

Route

 .state('parent.view-1', {
            url: "/view1",
            views: {
                "view-1": {
                    templateUrl: "app/parent/view-1.html"
                }
            }
        })

One of the views - view-1.html -

<ion-view>
    <ion-content>

        <h1>View 1</h1>

    </ion-content>
</ion-view>

The issue is that view-1 is not displaying inside the first slide. Can anyone tell what can be the issue here? Also, Is this the correct way to display slidable views? Please suggest. I am a beginner in Ionic.