CODEWITHSUNDEEP
angularjsionic-frameworkion-slides
Yuvaraj.M
Yuvaraj.M

Reputation: 9801

ion-slides not showing inside of ion-content and div

Am new to Ionic framework (Hybrid application development) from iOS native app development. I have to design a screen which should have two button like "Recent and All". If we click "Recent" the recent items should be displayed in list and if we click the "All", it should display the all items in the list. Am trying to use the "ion-slides" control to use two different lists. I have implemented the ion-slides in the html page inside the "ion-view", it is overlapping the two buttons (Recent, All buttons are overlapping and not clickable). If I add the "ion-slides" in "ion-content" or "div", the slides are not in visible. Also, I need to change the slides based on the button actions if I click the "Recent" button need to show the first slide. I have implemented the "ionicSlideBoxDelegate" but, it is not working. How can I fix this issue? Can you please help?

<ion-view view-title="Slide Box" ng-controller='homeViewController'>
    <ion-content>
        <div>
            <button ng-click="nextSlide()">Recent</button>
            <button ng-click="previousSlide()">All</button>
        </div>
        <div class="slide-wrapper1">
            <ion-slides pager="false" options="sliderOptions">
                <ion-slide-page>
                    <ion-content>
                        <h1>First Slide</h1>
                    </ion-content>
                </ion-slide-page>
                <ion-slide-page>
                    <ion-content>
                        <h1>Second Slide</h1>
                    </ion-content>
                </ion-slide-page>
            </ion-slides>
        </div>
    </ion-content> 
</ion-view>

Am able see the log "Next Button clicked" but, the action is not performing.

.controller('homeViewController', function($scope, $ionicSlideBoxDelegate) {

  $scope.nextSlide = function() {
    console.log("Next Button clicked", $ionicSlideBoxDelegate);
    $ionicSlideBoxDelegate.next();
    //$ionicSlideBoxDelegate.$getByHandle('burgers').next();
  }

  $scope.sliderOptions = {
      effect: 'slide',
      pagination: false,
      initialSlide: 0
    }

})

Upvotes: 0

Views: 1105

Answers (1)

Zohra Gadiwala
Zohra Gadiwala

Reputation: 216

It doesn't work inside the div. Keep it outside of the div it will work fine.

Upvotes: 1

Related Questions