带前后图片预览的Angular轮播组件是否存在？如何实现？

一、基于NgbCarousel的自定义改造方案 #

NgbCarousel默认没有这个特性，但可以通过CSS调整+少量逻辑实现：

• 调整容器与幻灯片样式
  给轮播容器设置窄于父元素的宽度，开启溢出可见，让两侧能露出相邻幻灯片：

  .custom-carousel {
    width: 80%; /* 主图容器占父容器80%，预留空间给两侧露出 */
    margin: 0 auto; /* 整体居中 */
    overflow: visible;
  }
  
  .carousel-inner {
    overflow: visible;
  }
  
  .carousel-item {
    display: flex;
    justify-content: center;
  }
  
  .carousel-item img {
    width: 100%;
    max-width: 600px; /* 限制主图最大宽度 */
  }
  

• 添加相邻幻灯片定位逻辑
  监听轮播切换事件，给上一张/下一张幻灯片添加定位类，让它们固定在主图两侧：

  import { Component, ViewChild } from '@angular/core';
  import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-custom-carousel',
    templateUrl: './custom-carousel.component.html',
    styleUrls: ['./custom-carousel.component.css']
  })
  export class CustomCarouselComponent {
    @ViewChild(NgbCarousel) carousel!: NgbCarousel;
  
    onSlide(event: any) {
      // 重置所有幻灯片的定位类
      const items = document.querySelectorAll('.carousel-item');
      items.forEach(item => item.classList.remove('prev-slide', 'next-slide'));
  
      // 给上一张、下一张幻灯片添加定位类
      const prevItem = document.querySelector(`[aria-label="Slide ${event.prev}"]`);
      const nextItem = document.querySelector(`[aria-label="Slide ${event.next}"]`);
      prevItem?.classList.add('prev-slide');
      nextItem?.classList.add('next-slide');
    }
  }
  

  补充定位样式：

  .carousel-item.prev-slide {
    position: absolute;
    right: 100%;
    top: 0;
    width: 20%; /* 露出部分的宽度 */
    opacity: 0.8; /* 可选：降低透明度区分主图 */
  }
  
  .carousel-item.next-slide {
    position: absolute;
    left: 100%;
    top: 0;
    width: 20%;
    opacity: 0.8;
  }
  

• 修改模板结构
  在模板中绑定切换事件，确保幻灯片标签正确：

  <ngb-carousel class="custom-carousel" (slide)="onSlide($event)">
    <ng-template ngbSlide *ngFor="let slide of slides; let i = index" aria-label="Slide {{i+1}}">
      <img [src]="slide.src" alt="{{slide.alt}}">
    </ng-template>
  </ngb-carousel>
  

二、现成替代库推荐 #

如果不想自定义改造，可直接选择自带该特性的Angular轮播库：

• ngx-slick-carousel：基于Slick Carousel封装，开启centerMode配置即可实现主图居中、两侧露边的效果，参数配置简单。
• 增强版ng-bootstrap轮播：部分第三方维护的ng-bootstrap衍生库，已经内置了类似的露边效果，直接引入即可使用。

注意：使用第三方库时，请确认其与当前Angular版本的兼容性。

内容的提问来源于stack exchange，提问作者IonicMan