Multiple sliders but display Only one

ionic-v1
1

I have multiple sliders each having different number of slides all are on slider.html means on single page. i want to display only one at a time
how i can achieve this ??
please guide :slight_smile:

2

various ways to do it. Simplest i believe is to use ng-if on each slider

3

Thank you for reply :slight_smile:
actually i am calling these slider from home.html where i have 3 icons when user will click on icon1 then slider1 will be displayed and slider2,slider3 must be hidden. and if user click on icon2 then slider2 will be displayed and slider1, slider3 must be hidden and so on…
hope so you got my point what i am trying to say :slight_smile:

4 
 <i class="icon1" ng-click=toggleSlider("icon1")></i>
 <i class="icon2" ng-click=toggleSlider("icon2")></i>
 <i class="icon3" ng-click=toggleSlider("icon3")></i>
<ion-slide class="slide1" ng-if=show1></ion-slide>
<ion-slide class="slide2" ng-if=show2></ion-slide>
 <ion-slide class="slide3" ng-if=show3></ion-slide>

 $scope.toggleSlider = function(SelectedIcon){
  if(icon1) $scope.show1 = true;
  if(icon2) $scope.show2 = true;
  if(icon3) $scope.show3 = true;
}
5

can you please elaborate little top three lines will be in home.html ??? and bottom lines will be slider.html ???

6

i have applied its not working :frowning:

7

here is my code detail
this is in home.html

<ion-row >
            <ion-col>
                <div><img src="assets/icon/emergenct txt png/headache.png" (click)="openBodypain('slider1')"/></div>
            </ion-col>
            <ion-col>
                <div><img src="assets/icon/emergenct txt png/chest pain.png" (click)="openBodypain('slider1')"/></div>
            </ion-col>
        </ion-row>

home.ts (as you can see i am calling another page)

openBodypain(num) {
      this.navCtrl.push(SliderPage, { pageNum: num });
  }

slider.html

<ion-slides pager class="slide1" ng-if="show1" >
        <ion-slide *ngFor="let slide of slides">
            <img [src]="slide.image" class="slide-image" />
            <h2 class="slide-title" [innerHTML]="slide.title"></h2>
            <p [innerHTML]="slide.description"></p>
        </ion-slide>
    </ion-slides>
    <ion-slides pager class="slide2" ng-if="show2" >
        <ion-slide *ngFor="let slide of slidesNew">
            <img [src]="slide.image" class="slide-image" />
            <h2 class="slide-title" [innerHTML]="slide.title"></h2>
            <p [innerHTML]="slide.description"></p>
        </ion-slide>
    </ion-slides>

slider.js

$scope.openChestpain = function(SelectedImg){
       
        if(slider1){
            $scope.show1 = true;
            $scope.show2 = false;
        }
        if(slider2){
            $scope.show2 = true;
            $scope.show1 = false;
        }
        //if(icon3) $scope.show3 = true;
    }
8

Oh i thought, you meant all sliders are written on home.html.
Although, i am not well versed of ionic2, are you able to receive the pagenum from your stateparams when you navigate to sliderpage?

if yes, then i believe you put it on some variable for e,g $scope.pagenum
Since you are passing a string, so,

 if($scope.pagenum.indexOf('slider1') != -1)
   $scope.show1 = true;

You can also use it directly on ng-if

<ion-slides pager class="slide1" ng-if="pagenum.indexOf('slider1') != -1 ">

Hope that helps.

9

yeah sliders are on diff page and their calling is on diff page
i have applied but it not working :frowning:

10

i have checked i am getting pageNum form home.html
but its not working as i want to do

11

looks like ion-slides doesn’t work as a wrapper. Add a div on top and it will work

<div ng-if="show1">
<ion-slides pager class="slide1" ng-if="show1" >
    <ion-slide *ngFor="let slide of slides">
        <img [src]="slide.image" class="slide-image" />
        <h2 class="slide-title" [innerHTML]="slide.title"></h2>
        <p [innerHTML]="slide.description"></p>
    </ion-slide>
</ion-slides>
</div>
<div ng-if="show2">
<ion-slides pager class="slide2" ng-if="show2" >
    <ion-slide *ngFor="let slide of slidesNew">
        <img [src]="slide.image" class="slide-image" />
        <h2 class="slide-title" [innerHTML]="slide.title"></h2>
        <p [innerHTML]="slide.description"></p>
    </ion-slide>
</ion-slides>
 </div>
12

Thanks for reply :slight_smile:
i did some searching and with help of my friend i solved this issue and thanks to you too
sure i’ll try this one too