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

Ionic Framework ionic-v3
1

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!

2

A simple solution could be something like this:

  <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:

.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!

3

I don’t think multiple slides on the same page will be supported/reliable until this PR is resolved one way or another.