Basic Carousel
Basic Carousel
Basic Carousel is an Angular wrapper for ngx-owl-carousel-o with custom navigation buttons, dots modes, and state-aware controls.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Default Margin | 10px |
| Button Size | 32-40px |
| Dot Size | 8-12px |
| Active Dot Color | Brand color |
| Disabled Button | Grey (#99A0A7) |
Navigation Variants
Section titled “Navigation Variants”Circular 40px buttons with directional arrow icons and drop shadow.
Minimalist chevron icons for subtle navigation.
Dynamic dot indicators representing slide position.
Configuration Options
Section titled “Configuration Options”| config | OwlOptions | Owl config object |
| items | any[] | [] | Slide data |
| buttonStyle | 'arrow' \| 'chevron' | 'arrow' | Button icon type |
| dotsBy | 'item' \| 'page' | 'item' | Dots calculation mode |
OwlOptions Common Props
Section titled “OwlOptions Common Props”| loop | boolean | false | Infinite scroll |
| margin | number | 10 | Gap between slides |
| dots | boolean | true | Show dots |
| nav | boolean | true | Show navigation |
| responsive | object | {} | Breakpoint settings |
| items | number | 1 | Slides per view |
Dots Modes
Section titled “Dots Modes”| Mode | Description | Example (6 items, 2 per page) |
|---|---|---|
'item' | One dot per item | 6 dots |
'page' | One dot per page | 3 dots |
Navigation State
Section titled “Navigation State”| State | canGoPrev | canGoNext |
|---|---|---|
| First (no loop) | false | true |
| Middle | true | true |
| Last (no loop) | true | false |
| Any (loop) | true | true |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Product galleries
- Banner rotations
- Testimonials
- Image sliders
- Card carousels
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Set appropriate items per page | Too few/many visible |
| Use loop for small sets | Infinite empty space |
| Provide navigation | No way to navigate |
| Touch/swipe enabled | Mouse-only |
| Lazy load images | Load all at once |