Dynamic Slides

demo
22

You dont need to change to rtl, just change the index of the active slide to the last index, and it will start from right to left.

24

Guys,

I have modified Zarko code a bit to support dynamic slides in Range (See minPage and maxPage variables in JS) and support for Right to Left (See rtl variable in JS).

Here is the code pen

See the Pen Ionic- Range Generated Slides (RTL Supported) by Agha (@aghausman) on CodePen.

Cheers

1 Like
25

how about removing a slide dynamically ? I can’t success.

diff --git a/index.html b/index.html
index 6b8c6d2..0fc5821 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
   <script id="firstSlide.html" type="text/ng-template">
     <h1>First Slide!</h1>
     <button class="button button-assertive" ng-click="showBonus()" ng-if="data.initialInstruction">Show Bonus Slide</button>
+    <button class="button button-positive" ng-click="hideBonus()" ng-if="!data.initialInstruction">Hide Bnous Slide</button>
     <p class="padding" ng-if="data.initialInstruction">Notice at first there are only 3 slides</p>
     <p class="padding" ng-if="data.secondInstruction">Now there are 4 slides</p>
 
diff --git a/index.js b/index.js
index a2ba5da..da42964 100644
--- a/index.js
+++ b/index.js
@@ -76,6 +76,16 @@ angular.module('ionicApp', ['ionic'])
 
     $ionicSlideBoxDelegate.update();
   };
+  
+  $scope.hideBonus = function() {
+    var index = _.findIndex($scope.data.slides, { template : 'bonusSlide.html' });
+    $scope.data.slides[index].viewable = false;
+    countSlides();
+    $scope.data.initialInstruction = true
+    $scope.data.secondInstruction = false;
+
+    $ionicSlideBoxDelegate.update();
+  };
 
   // Called each time the slide changes
   $scope.slideChanged = function(index) {
26

thanks @aghausman1, that’s what i was wondering about !

27

Hi @mhartington I am trying to show ionic slide box with accordion but when data inside accordion is more and the page starts scrolling then its slider-pager also starts scrolling to top. Can you please help me

28

it is not working with dynamic slide add or remove. Please help on the post-Ion slides do not update with dynamic content