0
# Carousel Components
1
2
Interactive slideshow component for cycling through elements with indicators, controls, and captions. Perfect for showcasing images, content panels, or testimonials.
3
4
## Core Imports
5
6
```typescript
7
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
8
```
9
10
## Capabilities
11
12
### NgbCarousel
13
14
Main carousel component that manages slides and navigation.
15
16
```typescript { .api }
17
@Component({
18
selector: 'ngb-carousel',
19
exportAs: 'ngbCarousel'
20
})
21
class NgbCarousel {
22
/** Enable/disable slide animations */
23
@Input() animation: boolean;
24
25
/** Time in milliseconds before the next slide is shown (0 = no auto cycle) */
26
@Input() interval: number;
27
28
/** If true, pauses cycling on mouseover and resumes on mouseleave */
29
@Input() pauseOnHover: boolean;
30
31
/** If true, carousel will wrap to the first slide when reaching the last */
32
@Input() wrap: boolean;
33
34
/** If true, show slide indicators */
35
@Input() showNavigationIndicators: boolean;
36
37
/** If true, show navigation arrows */
38
@Input() showNavigationArrows: boolean;
39
40
/** Currently active slide ID */
41
@Input() activeId: string;
42
43
/** Event emitted when slide transition starts */
44
@Output() slide: EventEmitter<NgbSlideEvent>;
45
46
/** Event emitted when slide transition ends */
47
@Output() slid: EventEmitter<NgbSlideEvent>;
48
49
/** Navigate to a specific slide by ID */
50
select(slideId: string, source?: NgbSlideEventSource): void;
51
52
/** Navigate to the previous slide */
53
prev(source?: NgbSlideEventSource): void;
54
55
/** Navigate to the next slide */
56
next(source?: NgbSlideEventSource): void;
57
58
/** Pause auto-cycling */
59
pause(): void;
60
61
/** Resume auto-cycling */
62
cycle(): void;
63
}
64
```
65
66
### NgbSlide
67
68
Template directive for defining individual slides.
69
70
```typescript { .api }
71
@Directive({
72
selector: 'ng-template[ngbSlide]'
73
})
74
class NgbSlide {
75
/** Unique identifier for the slide */
76
@Input() id: string;
77
78
/** If true, this slide cannot be navigated to */
79
@Input() disabled: boolean;
80
}
81
```
82
83
### NgbCarouselConfig
84
85
Configuration service for setting default carousel behavior.
86
87
```typescript { .api }
88
@Injectable({ providedIn: 'root' })
89
class NgbCarouselConfig {
90
/** Default animation setting */
91
animation: boolean;
92
93
/** Default interval setting */
94
interval: number;
95
96
/** Default wrap setting */
97
wrap: boolean;
98
99
/** Default keyboard setting */
100
keyboard: boolean;
101
102
/** Default pauseOnHover setting */
103
pauseOnHover: boolean;
104
105
/** Default showNavigationArrows setting */
106
showNavigationArrows: boolean;
107
108
/** Default showNavigationIndicators setting */
109
showNavigationIndicators: boolean;
110
}
111
```
112
113
## Event Interfaces
114
115
```typescript { .api }
116
interface NgbSlideEvent {
117
/** Previous slide ID */
118
prev: string;
119
120
/** Current slide ID */
121
current: string;
122
123
/** Direction of the slide transition */
124
direction: NgbSlideEventDirection;
125
126
/** Source that triggered the slide change */
127
source: NgbSlideEventSource;
128
129
/** Prevent the slide change */
130
preventDefault: () => void;
131
}
132
133
type NgbSlideEventDirection = 'left' | 'right';
134
135
type NgbSlideEventSource = 'timer' | 'arrowLeft' | 'arrowRight' | 'indicator';
136
```
137
138
## Usage Examples
139
140
### Basic Carousel
141
142
```typescript
143
@Component({
144
template: `
145
<ngb-carousel>
146
<ng-template ngbSlide>
147
<div class="picsum-img-wrapper">
148
<img src="https://picsum.photos/900/500?random=1" alt="First slide">
149
</div>
150
<div class="carousel-caption">
151
<h3>First slide label</h3>
152
<p>First slide description</p>
153
</div>
154
</ng-template>
155
156
<ng-template ngbSlide>
157
<div class="picsum-img-wrapper">
158
<img src="https://picsum.photos/900/500?random=2" alt="Second slide">
159
</div>
160
<div class="carousel-caption">
161
<h3>Second slide label</h3>
162
<p>Second slide description</p>
163
</div>
164
</ng-template>
165
</ngb-carousel>
166
`
167
})
168
export class BasicCarouselComponent {}
169
```
170
171
### Programmatic Control
172
173
```typescript
174
@Component({
175
template: `
176
<div class="mb-3">
177
<button class="btn btn-primary me-2" (click)="carousel.prev()">
178
Previous
179
</button>
180
<button class="btn btn-primary me-2" (click)="carousel.next()">
181
Next
182
</button>
183
<button class="btn btn-secondary me-2" (click)="carousel.pause()">
184
Pause
185
</button>
186
<button class="btn btn-secondary" (click)="carousel.cycle()">
187
Resume
188
</button>
189
</div>
190
191
<ngb-carousel
192
#carousel
193
[interval]="5000"
194
[pauseOnHover]="true">
195
<ng-template ngbSlide id="slide1">
196
<div class="d-block w-100" style="height: 400px; background: #364d79;">
197
<div class="carousel-content">
198
<h3>Slide 1</h3>
199
</div>
200
</div>
201
</ng-template>
202
203
<ng-template ngbSlide id="slide2">
204
<div class="d-block w-100" style="height: 400px; background: #40a9ff;">
205
<div class="carousel-content">
206
<h3>Slide 2</h3>
207
</div>
208
</div>
209
</ng-template>
210
</ngb-carousel>
211
`
212
})
213
export class ProgrammaticCarouselComponent {}
214
```
215
216
### Event Handling
217
218
```typescript
219
@Component({
220
template: `
221
<ngb-carousel
222
(slide)="onSlide($event)"
223
(slid)="onSlid($event)">
224
<ng-template ngbSlide id="slide1">
225
<div class="slide-content">Slide 1</div>
226
</ng-template>
227
228
<ng-template ngbSlide id="slide2">
229
<div class="slide-content">Slide 2</div>
230
</ng-template>
231
</ngb-carousel>
232
233
<div class="mt-3">
234
<p>Last event: {{ lastEvent }}</p>
235
</div>
236
`
237
})
238
export class EventCarouselComponent {
239
lastEvent: string = '';
240
241
onSlide(event: NgbSlideEvent) {
242
this.lastEvent = `Sliding from ${event.prev} to ${event.current}`;
243
}
244
245
onSlid(event: NgbSlideEvent) {
246
this.lastEvent = `Slid from ${event.prev} to ${event.current}`;
247
}
248
}
249
```