CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
user3582100
user3582100

Reputation: 121

Using $ionicSlideBoxDelegate for two or more Slide Box in Ionic

Sorry for this beginner question in HTML and AngularJS. I have two slide boxes in one page. I want that when the user clicks the previous/next arrow button, it shows the previous/next slide. But the problem is when clicking the previous/next arrow, all slides in the two boxes go to previous/next slide. How to make when clicking the next button in the first slide box, only the slide in the first slide box goes to next slide? Can I do it using only $ionicSlideBoxDelegate or do I need another way? Thanks...

Here is my HTML code:

<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 1 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 2 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 3</h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>
</ion-slide-box>

<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 1 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 2 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 3</h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>
</ion-slide-box>

And this is my controller codes:

.controller('HomeCtrl', function($scope, $ionicSlideBoxDelegate) {
    $scope.nextSlide = function() {
        $ionicSlideBoxDelegate.next();
    };

    $scope.previousSlide = function() {
        $ionicSlideBoxDelegate.previous();
    }
})

Upvotes: 2

Views: 5261

Answers (1)

colllin
colllin

Reputation: 9779

You need to specify "handles" for each slide box:

<ion-slide-box delegate-handle="burgers">...</ion-slide-box>

Then you can control specific slide boxes using the handle:

$ionicSlideBoxDelegate.$getByHandle('burgers').next();

And here's the documentation for $getByHandle

Upvotes: 4

Related Questions