Show some part of second slide in first slide - ionic2

Ionic Framework ionic-v3
1

Hey In my app I am using ionic slides component. I want to show some part of next slide in current slide. like this
image

if I use slidesPerview="2" I am getting complete two slides in one page.instead, I want only some part like 10% of the next one. what should I do to achieve this. Thanks in advance :slight_smile:

2

Hi @varun13, little bit late but you can achieve this by reducing the ion-slide width and setting a spaceBetween and centeredSlides like this.

set the .swiper-slide width to 97% !important like this and set the last slide to width 100 (otherwise it’ll look weird):

.swiper-slide {
  width: 90% !important;
	&:last-child {
	  width: 100% !important;
	}
}

Normally I would say you should stay off important, but since it otherwise set’s the slides width dynamically with JS you need it. Then on the ion-slides set the property spaceBetween=“10” or whatever you want this to be. This creates a space between the slides.

If you’d like, you could even center the slides. This way you can create something like sliding cards (with the previous and next on in the same view). If you want to achieve centered slides (The slide should be smaller then the screens width), you have to grab the slides Viewchild like this:

@ViewChild(Slides) slides: Slides;

Don’t forget to import them :slight_smile:

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

Now we have done this we can set some more properties then the ones ionic slides API gives us out of the box. Since it’s actually based on iDangerous’ Swiper, you could call the methods that are defined over here: http://idangero.us/swiper/api/

To make the slides centered you should set the centeredSlides like this:

  ngAfterViewInit() {
    this.slides.centeredSlides = true;
  }

You can set these properties from your controller at any given moment in time, but you have to be sure the slides viewChild is initialized, otherwise it’ll give you errors.

Good luck!

1 Like
3

hi …thank you for the reply… I solved it yesterday with same approach but forgot to close the question. :slight_smile: :beers: