# Multiple ion-slides on the same page- how to apply different behaviour

**URL:** <https://forum.ionicframework.com/t/multiple-ion-slides-on-the-same-page-how-to-apply-different-behaviour/100333>\
**Category:** ionic-v3\
**Created:** [August 1, 2017, 5:45am UTC](https://forum.ionicframework.com/t/multiple-ion-slides-on-the-same-page-how-to-apply-different-behaviour/100333 "2017-08-01T05:45:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nst](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nst](https://forum.ionicframework.com/u/nst)\
**Post date:** [August 1, 2017, 5:45am UTC](https://forum.ionicframework.com/t/multiple-ion-slides-on-the-same-page-how-to-apply-different-behaviour/100333/1 "2017-08-01T05:45:05Z")

</div>

Ionic version: (check one with “x”)  
[x] 3.x

I’m submitting a … (check one with “x”)  
[x] bug report

Current behavior:  
i have created a page with multiple sliders on the same page.  
i am only able to apply slides property on first slider.

Second slider is acting independently.for the first slider i have handled the responsive behaviour in the following manner. But its not working for the second slider.  
Also for the first slider i have to define responsive behaviour in the typescript, as there is no way to do it in CSS or anywhere else. And it isnt handled propely by ion-slides  
import { ViewChild } from ‘@angular/core’;  
import { Slides, Platform } from ‘ionic-angular’;  
import { Observable } from ‘rxjs/Observable’;  
import ‘rxjs/add/observable/fromEvent’;  
import ‘rxjs/add/operator/map’;  
import ‘rxjs/add/operator/debounceTime’;  
import ‘rxjs/add/operator/filter’;  
@Component({  
templateUrl: ‘home.html’  
})  
export class HomePage {  
@ViewChild(Slides) slider: Slides;  
width = document.documentElement.clientWidth;  
constructor(private \_audioProvider: AudioProvider,public platform:Platform) {  
const $resizeEvent = Observable.fromEvent(window, ‘resize’)  
.map(() =\> {  
return document.documentElement.clientWidth;  
})  
.debounceTime(200)

```
  $resizeEvent.subscribe(data => {
    this.width = data;
     if(this.platform.width() >= 320 && this.platform.width() <= 359){
        this.slider.slidesPerView = 2;
        this.slider.spaceBetween = 10;
        this.slider.resize();
    }
    else if(this.platform.width() >= 360 && this.platform.width() <= 479){
        this.slider.slidesPerView = 2;
        this.slider.spaceBetween = 20;
        this.slider.resize();
    }
    else if(this.platform.width() >= 480 && this.platform.width() <= 639){
        this.slider.slidesPerView = 2;
        this.slider.spaceBetween = 10;
        this.slider.resize();
    }
    else if(this.platform.width() >= 640 && this.platform.width() <=767){
      this.slider.slidesPerView = 2;
      this.slider.spaceBetween = 60;
      this.slider.resize();
   }
   else if(this.platform.width() >= 768 && this.platform.width() <= 1920)
    {
      this.slider.slidesPerView = 3;
      this.slider.spaceBetween = 20;
      this.slider.resize();
    }
    //alert(this.width);
  });

```

}  
}  
Expected behavior:

i want both of them to behave differently. I want different slidePerView and spacebetween for both the slides. Since the image size for both the slides is different.  
ways to apply spacebetween and slidesperview in css file the way it can be done in swiper using breakpoints  
Steps to reproduce:

create html file with more than one ion-slides.  
handle the responsive behaviour as shown in the code above  
when run you will be able to see that the slider properties are not applied on the second slider  
html file

 Ionic Blank 

```
  <span>slide1</span>
  <div class="view">View all</div>
  <div class="clear"></div>
</ion-col> 

<ion-col col-12 col-xl-9>
    <ion-slides>
      <ion-slide>
        <!--<img src="assets/img/img-1.jpg" />-->
        <img class="ene-img" src="assets/img/img-1.jpg" />
      </ion-slide>

      <ion-slide>
        <img class="ene-img" src="assets/img/img-2.jpg" />
      </ion-slide>

      <ion-slide>
        <img class="ene-img" src="assets/img/img-3.jpg" />
      </ion-slide>
    </ion-slides>
</ion-col>

```

View all

 ![]()

Morning
10-Jun-2017

```
<ion-slide class="re-img" >
     <div class="recent-thumb">
              <div class="clip">
                <img width="295" height="166" src="assets/img/634261873_295x166.jpg" /> 
               </div>
               <div class="text">
                  <div>Morning</div>
                 <span>10-Jun-2017</span>
               </div>
           </div>
   </ion-slide>

 <ion-slide class="re-img" >
     <div class="recent-thumb">
              <div class="clip">
                <img width="295" height="166" src="assets/img/644339262_295x166.jpg" /> 
               </div>
               <div class="text">
                  <div>Morning </div>
                 <span>10-Jun-2017</span>
               </div>
           </div>
   </ion-slide>  
 
  <ion-slide class="re-img" >
     <div class="recent-thumb">
              <div class="clip">
                <img width="295" height="166" src="assets/img/644460550_295x1666.jpg" /> 
               </div>
               <div class="text">
                  <div>Morning</div>
                 <span>10-Jun-2017</span>
               </div>
           </div>
   </ion-slide>  
   
 </ion-slides>

```

 Other information: in order to make to make both the ion-slides work independently i have applied below solution changes in slides.ts and swiper-events.ts 322273f#diff-b95b5413c05de5dc1ac226946d2c1f07

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

```
@ionic/cli-utils : 1.0.0-rc.2
Ionic CLI : 3.0.0-rc.2

```

System:  
Node : v6.10.3  
OS : Windows 10  
Xcode : not installed  
ios-deploy : not installed  
ios-sim : not installed

Can someone please help me with this!

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [August 11, 2017, 9:48pm UTC](https://forum.ionicframework.com/t/multiple-ion-slides-on-the-same-page-how-to-apply-different-behaviour/100333/2 "2017-08-11T21:48:35Z")

</div>

A simple solution could be something like this:

```auto
  <div class="div-slides">
    <span>Produtos</span>
    <ion-slides slidesPerView="3" spaceBetween="1">
      <ion-slide *ngFor="let prod of allProd" text-center>
            <img src="{{prod.img}}">
            <p class="tam-title"> {{prod.title}} </p>
      </ion-slide>
    </ion-slides>
  </div>

```

And so the SCSS:

```auto
.div-slides{    
    bottom: 0;
    width: 100%;    
    height: 160px;
    display: block;        
    background-color: #e6e6e6;
    img{
        width: auto;
        height: 80px;
        object-fit: contain;
    }
}
.tam-title{
    margin-top: -0.5%;
    font-size: 80%;
    font-weight: bold;
    color: #ff9900;
}  

```

I hope you enjoy!

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 11, 2017, 9:52pm UTC](https://forum.ionicframework.com/t/multiple-ion-slides-on-the-same-page-how-to-apply-different-behaviour/100333/3 "2017-08-11T21:52:03Z")

</div>

I don’t think multiple slides on the same page will be supported/reliable until [this PR](https://github.com/ionic-team/ionic/pull/11791) is resolved one way or another.