CODEWITHSUNDEEP
angularjsionic-framework
ahmed saeed
ahmed saeed

Reputation: 13

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

Upvotes: 0

Views: 334

Answers (2)

Iman Bahrampour
Iman Bahrampour

Reputation: 6800

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>

Upvotes: 1

ahmed saeed
ahmed saeed

Reputation: 13

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

Upvotes: 0

Related Questions