Angular中Owl Carousel 2.0.7实现当前幻灯片序号与总数显示

核心思路 #

通过监听Owl Carousel的changed.owl.carousel事件同步当前幻灯片索引，同时获取总幻灯片数并绑定到视图中。下面分两种常见场景给出实现方案：

场景1：直接使用原生Owl Carousel库 #

1. 组件类实现 #

在组件中初始化Owl实例，绑定事件并维护索引和总数变量：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import OwlCarousel from 'owl.carousel';

@Component({
  selector: 'app-carousel-container',
  templateUrl: './carousel-container.component.html',
  styleUrls: ['./carousel-container.component.css']
})
export class CarouselContainerComponent implements AfterViewInit {
  @ViewChild('owlCarousel') owlCarousel!: ElementRef;
  carouselInstance?: OwlCarousel;
  currentSlideIndex = 1; // Owl内部索引从0开始，显示用1起始
  totalSlides = 0;

  ngAfterViewInit(): void {
    // 初始化Owl Carousel，配置按需调整
    this.carouselInstance = new OwlCarousel(this.owlCarousel.nativeElement, {
      loop: false,
      margin: 15,
      nav: false,
      items: 1
    });

    // 获取总幻灯片数量
    this.totalSlides = this.carouselInstance.options.items.length;

    // 监听幻灯片切换事件，更新当前索引
    this.owlCarousel.nativeElement.addEventListener('changed.owl.carousel', (event: any) => {
      this.currentSlideIndex = event.item.index + 1;
    });
  }

  previousSlide(): void {
    this.carouselInstance?.previous();
  }

  nextSlide(): void {
    this.carouselInstance?.next();
  }
}

2. 模板修改 #

给Carousel容器添加模板引用，同时更新导航栏的文本绑定：

<!-- Owl Carousel容器 -->
<div #owlCarousel class="owl-carousel">
  <div class="item">幻灯片1</div>
  <div class="item">幻灯片2</div>
  <div class="item">幻灯片3</div>
</div>

<!-- 自定义导航栏 -->
<div class="carousel-custom-nav">
  <img src="assets/carousel-prev.svg" class="jo-carousel-prev" (click)="previousSlide()" />
  <p class="mr-ml-10">{{ currentSlideIndex }} / {{ totalSlides }}</p>
  <img src="assets/carousel-next.svg" class="jo-carousel-next" (click)="nextSlide()" />
</div>

场景2：使用Angular封装的ngx-owl-carousel-o库 #

如果项目用的是官方推荐的Angular封装版本，实现更简洁：

1. 组件类实现 #

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-carousel-container',
  templateUrl: './carousel-container.component.html',
  styleUrls: ['./carousel-container.component.css']
})
export class CarouselContainerComponent {
  currentSlideIndex = 1;
  totalSlides = 3; // 可从数据源动态获取，比如 slides.length

  carouselOptions: OwlOptions = {
    loop: false,
    margin: 15,
    nav: false,
    items: 1
  };

  onCarouselChanged(event: any): void {
    this.currentSlideIndex = event.item.index + 1;
  }
}

2. 模板修改 #

<owl-carousel 
  [options]="carouselOptions" 
  (changed)="onCarouselChanged($event)"
  #carousel
>
  <div class="item">幻灯片1</div>
  <div class="item">幻灯片2</div>
  <div class="item">幻灯片3</div>
</owl-carousel>

<!-- 自定义导航栏 -->
<div class="carousel-custom-nav">
  <img src="assets/carousel-prev.svg" class="jo-carousel-prev" (click)="carousel.previous()" />
  <p class="mr-ml-10">{{ currentSlideIndex }} / {{ totalSlides }}</p>
  <img src="assets/carousel-next.svg" class="jo-carousel-next" (click)="carousel.next()" />
</div>

注意事项 #

• 确保已正确安装依赖：原生Owl需要npm install owl.carousel jquery，并在angular.json中引入CSS和JS文件；ngx-owl-carousel-o则执行npm install ngx-owl-carousel-o即可。
• 若幻灯片是动态加载的，要在数据加载完成后再更新totalSlides的值，避免显示错误。

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