如何创建离子滑块，并在当前幻灯片中显示下一张幻灯片和前一张幻灯片的一些像素

Question

我已经创建了这样的滑块

​

但是我需要这样的东西

​

以下是我的代码

<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>

Answer 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;
  }
}