Do you want to add image slider/carousel in your angular app If yes then in this post Iam going to share awesome angular component which help to integrate Carousel/Slider Feature in your angular application.
Installation
Install angular Carousel Component via NPM
npm install --save @ngmodule/material-carousel |
Importing
import { MatCarouselModule } from '@ngmodule/material-carousel'; @NgModule({ // ... imports: [ // ... MatCarouselModule, // ... ] }) export class AppModule {} |
HTML
Here is the list of attributes which you can use to customize the angular Carousel/Slider
| Input | Type | Description | Default value |
|---|---|---|---|
timings |
string |
Timings for slide animation. | '250ms ease-in' |
autoplay |
boolean |
Enable automatic sliding. | true |
interval |
number |
Autoplay’s interval in milliseconds. | 5000 |
loop |
boolean |
Enable loop through arrows. | true |
hideArrows |
boolean |
Hide navigation arrows. | false |
hideIndicators |
boolean |
Hide navigation indicators. | false |
color |
ThemePalette |
Color palette from Material. | 'accent' |
maxWidth |
string |
Maximum width. | 'auto' |
proportion |
number |
Height proportion compared to width. | 25 |
slides |
number |
Maximum amount of displayed slides. | |
useKeyboard |
boolean |
Enable keyboard navigation. | true |
useMouseWheel |
boolean |
Enable navigation through mouse wheeling. | false |
orientation |
Orientation |
Orientation of the sliding panel. | 'ltr' |
See live demo and download source code.
This awesome plugin is developed by gbrlsnchs. Visit their official github repository for more information and follow for future updates.
