Unable to display the specified slide in ion-slides using its index number

950 Views Asked by At

Here is my code to implement slides using ion-slides

HTML file

<ion-slides options="options" slider="data.slider" >

  <!-- status view -->
  <ion-slide-page ng-repeat="t in business">
  <ion-content  class="padding">
    <!-- div ng-repeat="item in t.offers">
      <ion-list>
        <ion-item>
        {{item.product_name}}
        </ion-item>
      </ion-list>
    </div> -->
    <div class="list card" ng-repeat="item in t.offers" ng-click="productDesc(item.product_id)">

    <div class="item item-avatar">
      <img src="img/icon.png">
      <h2>{{item.product_name}}</h2>
      <p>{{item.company_name}}</p>
    </div>

    <div class="item item-image">
      <img src="{{ip}}/{{item.product_image}}">
    </div>

    <a class="item item-right assertive">
      {{item.offer_discount}}% item 
      <span style="margin-left: 150px;">AED. {{(item.offer_price-((item.offer_price*item.offer_discount)/100))|number:0}}</span><s style="margin-left: 10px;font-size: 14px;color: #565656;">{{item.offer_price}}</s>
    </a>

  </div>
  <ion-infinite-scroll on-infinite="addMoreItem(t.id)" ng-if="t.offers.length!=0"></ion-infinite-scroll>
  </ion-content>
  </ion-slide-page>

</ion-slides>

Controller Files

 $scope.options = {
  loop: false,
  effect: 'slide',
  speed: 500
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
  //console.log($ionicSlideBoxDelegate);
  //$ionicSlideBoxDelegate.update();

  //$ionicSlideBoxDelegate.slide(1,50);
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');


});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

Things I tried are

  1. Used $ionicSlideBoxDelegate.slide() function
  2. Called data.slider.slideTo() function inside $scope.$on("$ionicSlides.sliderInitialized", function(event, data)
1

There are 1 best solutions below

0
On

Do you want to set the initial slide? I have encountered the same issue and i have resolved it by putting the initialSlide attribute in the options object:

    $scope.options = {
      initialSlide: $scope.signId,
      loop: false,
      effect: 'slide',
      speed: 500,
    };