Ionic 3 How to fix the first slide of ion slides where the specs should be displayed and user swipe between offers to compare?

Question

Is there a way to fix the first slide of ion-slide and let the others moveable ?

I am trying to make a compare page where the main specs should be at the beginning and fixed, and then users can swipe between offers and keep seeing the specs.

Here is a stackblitz about it.

<ion-content padding>
    <ion-slides slidesPerView="3">
        <ion-slide>
          Fixed Slide
        </ion-slide>
        <ion-slide *ngFor="let offer of arrayOfOffers; let i = index">
          {{offer.data.cname}}
        </ion-slide>
      </ion-slides>
</ion-content>

And for the typescript script, it is simple for now for testing purposes:

arrayOfOffers:any[]=[];
    constructor(public navCtrl: NavController) {
      this.arrayOfOffers = [
        {id: 1, Name: 'Ali'}, {id: 2, Name: 'Sara'}, {id: 3, Name: 'Joanna'}]
    }

score 1 · Answer 1 · answered Jun 22 '19 at 07:59

try this

<div class="row">
    <ion-col col-3>
      Fixed Slide
    </ion-col>
    <ion-col col-9>
      <ion-slides slidesPerView="3">
        <ion-slide *ngFor="let offer of arrayOfOffers; let i = index">
          {{offer.Name}}
        </ion-slide>
      </ion-slides>
    </ion-col>
  </div>

score 1 · Accepted Answer · answered Jun 22 '19 at 08:08

One way to do that would be to use a fixed div with some styles to make it look like a slide. The result would be something like this:

Please take a look at this stackblitz demo.

Component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
export class HomePage {
  arrayOfOffers: any[] = [];

  constructor(public navCtrl: NavController) {
    this.arrayOfOffers = [
      { id: 1, name: 'Ali', color: 'red'}, 
      { id: 2, name: 'Sara', color: 'green'}, 
      { id: 3, name: 'Joanna', color: 'purple'}
    ]
  }
}

View

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="compare-section">

    <!-- Fixed section -->
    <div class="compare-section__fixed">
      <p>Fixed Slide</p>
    </div>

    <!-- Slides -->
    <ion-slides class="compare-section__slides" slidesPerView="2">
      <ion-slide *ngFor="let offer of arrayOfOffers; let i = index"
      [style.background-color]="offer.color">
        {{ offer.name }}
      </ion-slide>
    </ion-slides>

  </div>
</ion-content>

Styles

.compare-section {
  height: 100%;
  width: 100%;
  overflow: hidden;

  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.compare-section__fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 120px; // Change this based on your requirements
  background: blue;
}

@alim1990 glad to hear that :) – sebaferreras Jun 22 '19 at 11:52 — sebaferreras, Jun 22 '19 at 11:52

Ionic 3 How to fix the first slide of ion slides where the specs should be displayed and user swipe between offers to compare?

2 Answers2