Damir's Corner.

Showing a Part of Next Ionic Slide

Slides is a highly configurable Ionic component, even without accessing the underlying Swiper API directly. In this post I will make it show a small part of the neighboring slide on both sides.

Let's start with a couple of slides:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Slides
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content no-padding>
  <ion-slides>
    <ion-slide>1</ion-slide>
    <ion-slide>2</ion-slide>
    <ion-slide>3</ion-slide>
  </ion-slides>
</ion-content>

And style them a bit to see how each individual slide is rendered:

page-home {
  ion-slides {
    margin-top: 20px;
    height: 200px;
  }

  ion-slide {
    background-color: lightgray;
    border: 1px solid gray;
  }
}

The slides now occupy the full width of the page:

To move them a bit away from the edge, we'll need to use padding instead of margin. Therefore we'll move the background and border styles from the slide itself to the div inside it in order to keep the desired appearance:

page-home {
  ion-slides {
    margin-top: 20px;
    height: 200px;
  }

  ion-slide {
    padding: 0 30px;
  }

  .slide-zoom {
    background-color: lightgray;
    border: 1px solid gray;
    height: 200px;
    // hack to keep the digit vertically centered
    line-height: 200px;
  }
}

We're already much closer to what we want to achieve:

We still need to show a part of the next slide. We will achieve this by using a negative value for the spaceBetween attribute:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Slides
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content no-padding>
  <ion-slides spaceBetween="-40">
    <ion-slide>1</ion-slide>
    <ion-slide>2</ion-slide>
    <ion-slide>3</ion-slide>
  </ion-slides>
</ion-content>

When setting the value, keep in mind that the next slide has the same padding as ours. To see any of its actual contents, the absolute value will need to be larger than the padding. In our case with the padding of 30px, we use -40 to see 10px of the next slide (40 - 30 = 10):

This should be enough to get you going. Although the sample slides are overly simplified, you only need to replace the digits with a couple of divs with your content. Even the line-height hack won't be necessary any more.