tessl/npm-ng-bootstrap--ng-bootstrap

Angular powered Bootstrap UI component library with comprehensive Bootstrap 5 components for Angular applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Carousel Components

Name: tessl/npm-ng-bootstrap--ng-bootstrap
Author: tessl

Interactive slideshow component for cycling through elements with indicators, controls, and captions. Perfect for showcasing images, content panels, or testimonials.

Core Imports

import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';

Capabilities

NgbCarousel

Main carousel component that manages slides and navigation.

@Component({
  selector: 'ngb-carousel',
  exportAs: 'ngbCarousel'
})
class NgbCarousel {
  /** Enable/disable slide animations */
  @Input() animation: boolean;
  
  /** Time in milliseconds before the next slide is shown (0 = no auto cycle) */
  @Input() interval: number;
  
  /** If true, pauses cycling on mouseover and resumes on mouseleave */
  @Input() pauseOnHover: boolean;
  
  /** If true, carousel will wrap to the first slide when reaching the last */
  @Input() wrap: boolean;
  
  /** If true, show slide indicators */
  @Input() showNavigationIndicators: boolean;
  
  /** If true, show navigation arrows */
  @Input() showNavigationArrows: boolean;
  
  /** Currently active slide ID */
  @Input() activeId: string;
  
  /** Event emitted when slide transition starts */
  @Output() slide: EventEmitter<NgbSlideEvent>;
  
  /** Event emitted when slide transition ends */
  @Output() slid: EventEmitter<NgbSlideEvent>;
  
  /** Navigate to a specific slide by ID */
  select(slideId: string, source?: NgbSlideEventSource): void;
  
  /** Navigate to the previous slide */
  prev(source?: NgbSlideEventSource): void;
  
  /** Navigate to the next slide */
  next(source?: NgbSlideEventSource): void;
  
  /** Pause auto-cycling */
  pause(): void;
  
  /** Resume auto-cycling */
  cycle(): void;
}

NgbSlide

Template directive for defining individual slides.

@Directive({
  selector: 'ng-template[ngbSlide]'
})
class NgbSlide {
  /** Unique identifier for the slide */
  @Input() id: string;
  
  /** If true, this slide cannot be navigated to */
  @Input() disabled: boolean;
}

NgbCarouselConfig

Configuration service for setting default carousel behavior.

@Injectable({ providedIn: 'root' })
class NgbCarouselConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default interval setting */
  interval: number;
  
  /** Default wrap setting */
  wrap: boolean;
  
  /** Default keyboard setting */
  keyboard: boolean;
  
  /** Default pauseOnHover setting */
  pauseOnHover: boolean;
  
  /** Default showNavigationArrows setting */
  showNavigationArrows: boolean;
  
  /** Default showNavigationIndicators setting */
  showNavigationIndicators: boolean;
}

Event Interfaces

interface NgbSlideEvent {
  /** Previous slide ID */
  prev: string;
  
  /** Current slide ID */
  current: string;
  
  /** Direction of the slide transition */
  direction: NgbSlideEventDirection;
  
  /** Source that triggered the slide change */
  source: NgbSlideEventSource;
  
  /** Prevent the slide change */
  preventDefault: () => void;
}

type NgbSlideEventDirection = 'left' | 'right';

type NgbSlideEventSource = 'timer' | 'arrowLeft' | 'arrowRight' | 'indicator';

Usage Examples

Basic Carousel

@Component({
  template: `
    <ngb-carousel>
      <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
          <img src="https://picsum.photos/900/500?random=1" alt="First slide">
        </div>
        <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>First slide description</p>
        </div>
      </ng-template>
      
      <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
          <img src="https://picsum.photos/900/500?random=2" alt="Second slide">
        </div>
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>Second slide description</p>
        </div>
      </ng-template>
    </ngb-carousel>
  `
})
export class BasicCarouselComponent {}

Programmatic Control

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="carousel.prev()">
        Previous
      </button>
      <button class="btn btn-primary me-2" (click)="carousel.next()">
        Next
      </button>
      <button class="btn btn-secondary me-2" (click)="carousel.pause()">
        Pause
      </button>
      <button class="btn btn-secondary" (click)="carousel.cycle()">
        Resume
      </button>
    </div>
    
    <ngb-carousel 
      #carousel
      [interval]="5000"
      [pauseOnHover]="true">
      <ng-template ngbSlide id="slide1">
        <div class="d-block w-100" style="height: 400px; background: #364d79;">
          <div class="carousel-content">
            <h3>Slide 1</h3>
          </div>
        </div>
      </ng-template>
      
      <ng-template ngbSlide id="slide2">
        <div class="d-block w-100" style="height: 400px; background: #40a9ff;">
          <div class="carousel-content">
            <h3>Slide 2</h3>
          </div>
        </div>
      </ng-template>
    </ngb-carousel>
  `
})
export class ProgrammaticCarouselComponent {}

Event Handling

@Component({
  template: `
    <ngb-carousel
      (slide)="onSlide($event)"
      (slid)="onSlid($event)">
      <ng-template ngbSlide id="slide1">
        <div class="slide-content">Slide 1</div>
      </ng-template>
      
      <ng-template ngbSlide id="slide2">
        <div class="slide-content">Slide 2</div>
      </ng-template>
    </ngb-carousel>
    
    <div class="mt-3">
      <p>Last event: {{ lastEvent }}</p>
    </div>
  `
})
export class EventCarouselComponent {
  lastEvent: string = '';
  
  onSlide(event: NgbSlideEvent) {
    this.lastEvent = `Sliding from ${event.prev} to ${event.current}`;
  }
  
  onSlid(event: NgbSlideEvent) {
    this.lastEvent = `Slid from ${event.prev} to ${event.current}`;
  }
}