'Ionic Slide-box not work after second slide

I have an issue with ion-slide-box when I put 2 slide it works fine but when I insert new slide it hide some of slides

<ion-slide-box  does-continue="true">

<ion-slide ng-repeat="item in images2">
    <ion-content>
    <img src="{{item.sld}}" width="100%" height="100%" >
</ion-content>

</ion-slide>

and controller

 $scope.images = {
    'slides': [
  {'sld':'img/sc/1.jpg'},
  {'sld':'img/sc/2.jpg'},
  {'sld':'img/sc/3.jpg'},
  {'sld':'img/sc/4.jpg'},
  { 'sld': 'img/sc/5.jpg' }
    ]
};
$scope.images2 = $scope.images.slides;

what's solution of this

angularjsionic


Solution 1:[1]

If you change the direction(rtl) in ionic elements then your slider doesn't Work Properly.

Add dir='ltr' to ion-slides element as below:

<ion-slides pager dir="ltr">
<ion-slide *ngFor="let slide of slides">
  <img [src]="slide.image" class="slide-image" />
  <h2 class="slide-title" [innerHTML]="slide.title"></h2>
</ion-slide>

Solution 2:[2]

I solved this issue as : - I replace float before from left to right because arabic direction rtl; - I replace it back to left in ionic.css .

that's mean it's my mistake. 

.slider-slide {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  vertical-align: top; }

at line 5463

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ahmed saeed

Related Questions