bug: ion-slide-box with two slides and does-continue does not work correctly

[KillerCodeMonkey]

Type: bug

Platform: all

hey guys in the rc4 and last nightly i use an ion-slide-box with the does-continue attribute and two slides.

http://codepen.io/bengtweisse/pen/PqYyvM

you can scroll to the second slide, but not back and not forward. If you swipe back from the first slide the pager is not correct. In the dom you can see more than two ion-slides.

If you resize the window there are suddenly four pager-"points".

If you add a third slide everything works fine.

[bojanvidanovic]

+1

[ronaldcurtis]

+1

[fileupload]

I have met the same problem recently, and when checking the ioinc souce code of "ionic.bundle.js", I found this souce as below:

  special case if two slides
  if (browser.transitions && options.continuous && slides.length < 3) {
    element.appendChild(slides[0].cloneNode(true));
    element.appendChild(element.children[1].cloneNode(true));
    slides = element.children;
  }

It seems like that If and only if the slide count is 2, ionic will double the count while setting up. I don't quite understand why the author added this special case, and how to fix it properly,

[yu521088]

I am having the same problem now, +1

[FME-nstokoe]

Same here. +1

[lbickston]

Same problem. +1

[diegoeduardorios]

+1

[Xalio08]

+1

[tflavin]

Also having an issue with two slides (+1).

[tflavin]

I was able to find a temporary fix for my issue.

My issue was slightly different than the original post in that the pager was showing two pager icons but actually had four slides. When you got to slides 3 and 4 (which were duplicates of 1 and 2), no pager icon was selected. So, whenever I only have two slides and the slide changes (using on-slide-changed), I check the current index via $ionicSlideBoxDelegate.currentIndex(). I have an ng-class applied to the slidebox if the index is 2 (ex: 'first-slide') and one when it is 3 (ex: 'second-slide'). I also overrode the css for the .first-slide .slider-pager span:first_child and .second-slide .slider-pager span:nth-child(2) to have opacity: 1.

This change makes it appear that there are only 2 slides, even though there are really 4. This wouldn't work if the issue didn't let me slide through like in the original post, but for my issue it was good enough until there is a fix.

Edit: Just found that on some devices it's showing 4 pagers. So, I am now applying an ng-class on the slidebox when there are two slides (ex: 'two-slides'). Then I had to modify the css to set .two-slides .slider-pager span:nth-child(3) and .two-slides .slider-pager span:nth-child(4) to have display: none. This appears to work.

[marcocaimi]

have the same issue as tflavin, 4 slides and only two slides, but if i open a modal over the page when the modal is closed the sliders become 4.

[JerryBels]

@tflavin +1 two slides should definitely not be changed into 4 slides. It's counter intuitive. Or at least it should be in the docs !

[ghost]

Having the same problem. Any proper fix yet?

[cheesezhe]

same issue...+1

[mrtomrichy]

+1

[quedicesebas]

Same here with 1.1.0

[mesca]

+1

[meticoeus]

Another work around is to special case your model to explicitly duplicate your array in the pattern [0, 1, 0, 1] if it has 2 elements.

[cheesezhe]

Hey,guys, I add the following code to my controller script, and it seems that that bug disappeared. function loadIds() is to get json data from server and store data into $scope.ids

$scope.$on('$ionicView.beforeEnter', function(){
        if($scope.ids.length == 0){
          $scope.loadIds();
        }else{
          $ionicSlideBoxDelegate.update();
          $ionicSlideBoxDelegate.loop(true);
        }
      });

[tiagojdf]

It seems the copied objects don't inherit the data in their scope, causing the following code to not work:

ng-click="goTo(post)"

[tipstrade]

I've had some the same issue and fixed it using the following hack:

Make sure you have an ng-if directive on the ion-slide-box (ng-show does not work) so that it's not rendered unless there are items

Second, when updating the ng-repeat source, swap it out with null (or an empty array), and then update in a $timeout:

    // HACK: Because of the annoying bug with the slider pager dots being duplicated
    // https://github.com/driftyco/ionic/issues/3609
    var temp = $scope.transaction.Vehicle.Photos;
    $scope.transaction.Vehicle.Photos = [];

    $timeout(function() {
      $scope.transaction.Vehicle.Photos = temp;

      $timeout(function() {
        var del = $ionicSlideBoxDelegate.$getByHandle("details-thumbnails");
        del.update();
        del.slide(0);
      });
    });

The two sets of timeouts are required

[visormatt]

+1

[DezDing]

+1

[Clawg]

This is still an issue in 1.1.1. I have created a pen (http://codepen.io/clawg/pen/ojKQQm) where the number of dots jumps form 2 to 4 when you resize the window. This only happens with 2 items and its not even http data that populates the ion-slide. Also worth noting is the active state of the dot, before resize where there are 2 the dots get out of sync as they are working off 4 slides not 2.

[mlynch]

Fixed in master and landing in 1.2:

Hey everyone, can you try the new slidebox just pushed to master (available in upcoming 1.2):

<ion-slides options="options">
  <ion-slide-page>
  </ion-slide-page>
</ion-slides>

Handles the < 3 slide and looping case a lot better! Specify options in the options scope variable:

controller('MyCtrl', function($scope) {
  $scope.options = {
    loop: true
  };
});

[kormic]

I still have this issue in 1.2.4. At least on chrome. I haven't tried this in the emulator yet...

[fareesh]

Still in 1.2.4 for me as well

[omma2289]

I'm on version 1.2.4 and have the same issue described by tflavin

[fengsong97]

+1

[andreluizbellon]

+1

[jgw96]

Hey @fengsong97 and @andredublin are you guys using ionic 1.3.1?

[RohitDhamal]

@fileupload thanx, since your rply gave me idea. Facing same type of problem. But was able to do some changes and they are working fine as of now so far... I don't know whether that is correct way or not completely, since i am new to ionic but following changes in ionic.bundle.js helped me solve my issue though. Just commented following lines:-

//special case if two slides if (browser.transitions && options.continuous && slides.length < 3) { element.appendChild(slides[0].cloneNode(true)); element.appendChild(element.children[1].cloneNode(true)); slides = element.children; }

with these everything is working fine so far.

[wkoeter]

@RohitDhamal

Your solution makes the slide transition animation awkward (but it does work). My guess is that the programmer added the extra slides for transition animations.

slide 1 | slide 2

If you swipe left from slide 2 there is no slide to its right which makes it look like there is NO sliding done while in fact the slide DID change. With 3 slides there is always a slide to the right so the transition can occur smoothly.

slide 1 | slide 2 | duplicateslide 1

looking forward to a fix :/

[wkoeter]

If you update to ionic Latest Version: 1.3.1 "el salvador" you can use another directive which is not ion-slide-box but ion-slides. This appearently does not have these issues.

[happysiva]

+1

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.