'How to create the ionic slider with shows some pixels of next and previous slides in the present slide

i have created the sliders like this

but i need something like this

Here is my code

<ion-slides [options]="slideOpts_slider">
<ion-slide>
<img src="/assets/images/banner1.png" class="">
</ion-slide>
<ion-slide>
<img src="/assets/images/banner2.png" class="">
</ion-slide>
</ion-slides>

Solution 1:^[1]

html code

 <ion-slides [options]="options">
    <ion-slide>
      
      <ion-grid>
        <ion-row>
          <ion-col size="12" class="poster-col">
            <img class="poster" src="https://www.komar.de/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/v/d/vd-046-star-wars-official-poster-ep7.jpg" alt="">
          </ion-col>
          <ion-col size="12">
            <h5 class="ion-no-margin">Movie Title</h5>
            <p class="ion-no-margin rate">
              <ion-icon name="star"></ion-icon> 8.5
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
      
      
    </ion-slide>
    
    <ion-slide>
      
      <ion-grid>
        <ion-row>
          <ion-col size="12" class="poster-col">
            <img class="poster" src="https://www.washingtonpost.com/graphics/2019/entertainment/oscar-nominees-movie-poster-design/img/black-panther-web.jpg" alt="">
          </ion-col>
          <ion-col size="12">
            <h5 class="ion-no-margin">Movie Title</h5>
            <p class="ion-no-margin rate">
              <ion-icon name="star"></ion-icon> 8.5
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
      
      
    </ion-slide>
    
    <ion-slide>
      
      <ion-grid>
        <ion-row>
          <ion-col size="12" class="poster-col">
            <img class="poster" src="https://www.komar.de/media/catalog/product/cache/4/image/9df78eab33525d08d6e5fb8d27136e95/v/d/vd-046-star-wars-official-poster-ep7.jpg" alt="">
          </ion-col>
          <ion-col size="12">
            <h5 class="ion-no-margin">Movie Title</h5>
            <p class="ion-no-margin rate">
              <ion-icon name="star"></ion-icon> 8.5
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
      
      
    </ion-slide>
    
    <ion-slide>
      
      <ion-grid>
        <ion-row>
          <ion-col size="12" class="poster-col">
            <img class="poster" src="https://www.washingtonpost.com/graphics/2019/entertainment/oscar-nominees-movie-poster-design/img/black-panther-web.jpg" alt="">
          </ion-col>
          <ion-col size="12">
            <h5 class="ion-no-margin">Movie Title</h5>
            <p class="ion-no-margin rate">
              <ion-icon name="star"></ion-icon> 8.5
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
      
      
    </ion-slide>
    
  </ion-slides>

ts code

options = {
    centeredSlides: true,
    loop: true,
    spaceBetween: -100,
  };

css code

.swiper-slide-prev {
  opacity: .5;
}

.swiper-slide-next {
  opacity: .5;
}

.swiper-slide {
  transition: .4s all;
}

.poster-col {
  height: 400px;
  img {
    border-radius: 40px;
  }
}

Solution 2:^[2]

Just put this in ts page

//home.page.ts

export class HomePage {
  options = {
    slidesPerview: 1.3,
    spaceBetween: 1,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ravi Ashara
Solution 2	Don Benito

'How to create the ionic slider with shows some pixels of next and previous slides in the present slide

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]