Dynamic Slides

I’ve never heard of slide-viewable. It doesn’t appear in the code for sliders : https://github.com/driftyco/ionic/blob/master/js/views/sliderView.js

Sorry, I was confused when I wrote this… it was actually you who mentioned “viewable”, not “slide-viewable”. I’m not familiar with the viewable property, anyhow, but this is the thread it came from:

Sorry… Either way, the question still stands regarding whether the viewable property prevents the DOM from loading until it is triggered true, or whether I need to implement any special handling to make this happen.

Thanks,
Marc

I see what you mean. In my sample, the viewable is filtered on in the ng-repeat like this :

<ion-slide ng-repeat="slide in data.slides | filter:{viewable : true}">
	<div ng-include src="slide.template"></div>
</ion-slide>

Angular does NOT create DOM elements for filtered items. So, they will not be in the DOM until the viewable property is toggled to true.

DOM with the “bonus slide” set to false:

DOM with “bonus slide” set to true:

Thanks for the demo @Calendee, very easy to follow, and works great on my device.
Is there any support for appending and prepending slides dynamically, while maintaining the position of the current slide in the middle? Following this other great codepen http://codepen.io/anon/pen/loijb by @carina works great on the browser, but the $ionicSlideboxDelete.slide() is very jumpy on my iPhone, making it flicker and make random jumps.

Any help is appreciated.

2 Likes

@MarcoAppMaker I also had this problem the first time I tried this method, but it’s been a while. Any thoughts out there?

I made this demo of infinite generated slides and it is based on the nightly Ionic. It keeps three and only three slides in the DOM and in the backing data structure.

See the Pen Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

It seems to work just fine under “normal” circumstances both on desktop ( Chrome ) and on devices.
However I can see two UX problems:

  1. Visual issues during quick looping through the slides ( try clicking on the Next button quickly and many times )
  2. A smal drag and release of a slide will temporary show a white area on release. -> Nothing to do with dynamic slides, I found it happening also with hardcoded slides when using the nightly. Likely an Ionic bug. See https://github.com/driftyco/ionic/issues/2625

UPDATE Nov 30: The demo no longer works as expected since the latest slidebox refactor in nightly. Moving target…

UPDATE Dec 07: Here is a new version that works. Not perfect but it proves it’s doable:

See the Pen Working Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

UPDATE Dec 09: Off for some diazepam at the farmacy :slight_smile:

UPDATE Dec 10: Back to the future.

See the Pen 2014-12-10 Working Ionic Infinite Generated Slides by Zarko Hristovski (@zarko) on CodePen.

Any ideas for improvements are welcomed. I hope @Calendee can pitch in too.

5 Likes

Nice work. Seems to work pretty well to me. I can’t improve on it. I wouldn’t about those small white areas flashing. You’ve got to be doing crazy fast stuff on a device to make those happen. People just aren’t going to click that fast.

Thanks. Soon enough I’ll put that mechanism in real-world scenario and see how solid the whole thing really is. I am still interested though if there are any better or alternative implementations with the same requirements - unknown number of slides and a (very) smooth user experience.

@zarko I’m not seeing any problems with this in the latest nightly.

Fun fact: If the user swipes really fast now, multiple selects will be queued. Eg if you swipe three times in quick succession, it will run three sequential swipes.

I found this behavior in the iOS photos app and thought it was the best way to deal with this case.

@andy It is very obvious what happens when you swipe or click on Previous or Next - whatever change was done in the last refactor causes the slide box to keep on going. Just try and see. The original demo code was make with nightly 805 or so, and such a problem did not exist.
The question maybe is what is the correct way to append and prepend slides programatically.

Great, thank for the demo, @Calendee

Thanks for great demo but after changing the direction with rtl images are gone.

Any help would be highly appreciated.

Thank for you demo @Calendee.
How about if we need add more slides before the first slide? I tried it and after add one more slide, the index of slide changed. I have to move next slide and this made slide do animate. And I think this does not make sense. Do you have any suggestion for this case?

I’m dealing with the same thing. Dynamically repeating slides while using ng-if or ng-filter shifts the slidebox index by 1, causing the slidebox to move an extra slide forward. All my efforts to override this are leaving me with a choppy re-render when I remove the slide or pop it off the array

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.

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

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) {

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

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