How to manage multiple sliders in ionic2 for web applications?

Question

I have html like this for slides

<ion-slides [pager]="false" slidesPerView="6" #slider_a> <ion-slide *ngFor="let slide of items_a " #ddd> <ion-card class="list-card" > <div class="cardInnerWrap"> <ion-item> {{slide.gameTitle}} </ion-item> <img src="{{slide.gameImage}}"> </div> </ion-card> </ion-slide> </ion-slides> <ion-slides [pager]="false" slidesPerView="6" #slider_b> <ion-slide *ngFor="let slide of items_b " #ddd> <ion-card class="list-card" > <div class="cardInnerWrap"> <ion-item> {{slide.gameTitle}} </ion-item> <img src="{{slide.gameImage}}"> </div> </ion-card> </ion-slide> </ion-slides> 

works on a mobile device. The problem is that I am dragging slide 2 in Firefox (also in chrome), slide 1 is also dragging. 2). How can I make 2 fully independent ionic 2 sliders that work in the browser

Answer 1

Update Thanks to @cookiecookson from the Slack channel:

• link to github problem
• link to PR that fixes this problem (not yet merged from 06/27/2017)

---

This seems to be a bug in the ionic implementation of the Swiper shell. One way to solve it is to use another shell for the Swiper library, like this one . You can find a demo application in this github repo .

The end result will be something like this:

t

First you need to install it

 npm install angular2-swiper --save 

Then import it into the app.module.ts file (or the desired module)

 import { KSSwiperModule } from 'angular2-swiper'; // ... @NgModule({ declarations: [...], imports: [KSSwiperModule, ...], bootstrap: [...], entryComponents: [..], providers: [...] }) export class AppModule { } 

And then just use it on your page.

Component Code:

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public items_a: Array<any>; public items_b: Array<any>; public options: any; constructor(public navCtrl: NavController) { this.items_a = [ { gameTitle: 'Title1', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title2', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title3', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title4', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title5', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title6', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title7', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title8', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title9', gameImage: 'http://via.placeholder.com/200x200' } ]; this.items_b = [ { gameTitle: 'Title10', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title11', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title12', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title13', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title14', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title15', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title16', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title17', gameImage: 'http://via.placeholder.com/200x200' }, { gameTitle: 'Title18', gameImage: 'http://via.placeholder.com/200x200' } ]; this.options = { slidesPerView: 3 } } } 

View:

 <ion-header> <ion-navbar> <ion-title> Multiple slides </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ks-swiper-container [options]="options"> <ks-swiper-slide *ngFor="let slide of items_a"> <ion-card class="list-card"> <div class="cardInnerWrap"> <ion-item> {{ slide.gameTitle }} </ion-item> <img src="{{ slide.gameImage }}"> </div> </ion-card> </ks-swiper-slide> </ks-swiper-container> <ks-swiper-container [options]="options"> <ks-swiper-slide *ngFor="let slide of items_b"> <ion-card class="list-card"> <div class="cardInnerWrap"> <ion-item> {{ slide.gameTitle }} </ion-item> <img src="{{ slide.gameImage }}"> </div> </ion-card> </ks-swiper-slide> </ks-swiper-container> </ion-content> 

Answer 2

I found a working solution here

HTML:

 <ion-header no-border> <ion-navbar transparent> <ion-title>Custom Pagination</ion-title> </ion-navbar> </ion-header> <ion-content text-center> <h3>Pagination numbers</h3> <ion-slides #sliderOne pager (ionDidChange)="onSlideChanged()"> <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}"> <h2>{{slide.title}}</h2> </ion-slide> </ion-slides> <h3>Pagination numbers 2</h3> <ion-slides #sliderTwo pager (ionDidChange)="onSlideChanged()"> <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}"> <h2>{{slide.title}}</h2> </ion-slide> </ion-slides> <h3>Pagination icons</h3> <ion-slides #sliderThree pager (ionDidChange)="onSlideChanged()"> <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}"> <h2>{{slide.title}}</h2> </ion-slide> </ion-slides> </ion-content> 

TS:

 import { Component, ViewChild } from '@angular/core'; import { NavController, Slides, IonicPage } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-slide-custom-pagination', templateUrl: 'slide-custom-pagination.html' }) export class SlideCustomPaginationPage { @ViewChild('sliderOne') sliderOne: Slides; @ViewChild('sliderTwo') sliderTwo: Slides; @ViewChild('sliderThree') sliderThree: Slides; slides = [ { title: 'Dream\ Adventure', imageUrl: 'assets/img/lists/wishlist-1.jpg', songs: 2, private: false }, { title: 'For the Weekend', imageUrl: 'assets/img/lists/wishlist-2.jpg', songs: 4, private: false }, { title: 'Family Time', imageUrl: 'assets/img/lists/wishlist-3.jpg', songs: 5, private: true }, { title: 'My Trip', imageUrl: 'assets/img/lists/wishlist-4.jpg', songs: 12, private: true } ]; constructor(public navCtrl: NavController) { } ngAfterViewInit() { this.sliderOne.paginationBulletRender = (index, className) => { return `<span class="custom-pagination ${className}>${index + 1}</\span>`; }; this.sliderTwo.paginationBulletRender = (index, className) => { return `<span class="custom-pagination-2 ${className}>${index + 1}</\span>`; }; this.sliderThree.paginationBulletRender = (index, className) => { return `<span class="custom-pagination-3 bullet-icon-${index + 1} ${className}></\span>`; }; } }