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) |
Button Styles
Section titled “Button Styles”Directional arrows (← →)
Chevron icons (« »)
No navigation buttons
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 |