Hi guys, how are you?
I'm not using Angular anymore, it means I no longer use this component, what prevents me from pushing quality commits, doing assertive code reviews and being up-to-date with new Angular releases, same as gbrlsnchs. I don't do open source for stars, I do to help people, so I don't want people that depend on this component to have a bad support.
I will try to deliver some updates to Angular version, but I can't do it in proper ways, because I don't know really how things are working in newest versions and because I don't have much time to do it either. I'll check the version issues, and the PR's openeds, and after that I will archive the project. I saw this fork from gbrlsnchs former project that are updated to 14th version: https://github.com/magloft/material2-carousel. Sorry for the problems guys.
This package is a carousel component for Angular using Material Design.
Until v1
is reached, breaking changes may be introduced.
npm install --save @ngbmodule/material-carousel
//...
import { MatCarouselModule } from '@ngbmodule/material-carousel';
@NgModule({
// ...
imports: [
// ...
MatCarouselModule.forRoot(),
// ...
]
})
export class AppModule {}
MatCarouselComponent
import { MatCarousel, MatCarouselComponent } from '@ngbmodule/material-carousel';
<mat-carousel>
...
</mat-carousel>
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. | true |
hideIndicators |
boolean |
Hide navigation indicators. | true |
color |
ThemePalette |
Color palette from Material. | 'accent' |
maxWidth |
string |
Maximum width. | 'auto' |
maintainAspectRatio |
boolean |
If true, use proportion to determine height, else slideHeight is used. |
true |
proportion |
number |
Height proportion compared to width. | 25 |
slideHeight |
string |
Explicit slide height. Used when maintainAspectRatio is false. | '100%' |
slides |
number |
Maximum amount of displayed slides. | |
useKeyboard |
boolean |
Enable keyboard navigation. | false |
useMouseWheel |
boolean |
Enable navigation through mouse wheeling. | false |
orientation |
Orientation |
Orientation of the sliding panel. | 'ltr' |
svgIconOverrides |
SvgIconOverrides |
Override default carousel icons with registered SVG icons. | |
pauseOnHover |
boolean |
Override default pause on hover. | true |
Output | Type | Description |
---|---|---|
animationStart |
number |
It emits the currentIndex when animation starts |
change |
number |
It emtis the currentIndex when animation ends |
By default, maintainAspectRatio
is true, which means height is controlled through proportion
.
If you want to have a carousel with constant height (regardless of width), you must set maintainAspectRatio
to false.
By default, slideHeight
is set to 100%
, which will not work if the parent element height isn't defined (i.e. relative heights do not work if the parent height is auto
). In that case you could pass a valid css string for slideHeight
. You can use any valid css height string like 100px
or 25vh
.
Play around with the demo to see how you can use this carousel with or without explicit parent height.
With parent elements that have height:auto
proportion
if you want a carousel that resizes responsively (this is the default configuration).maintainAspectRatio="false"
and a non-percentage slideHeight
if you want a fixed height carousel.slideHeight
; the carousel will not render.With parent elements that have a set height
maintainAspectRatio="false"
if you want a fixed height carousel that fills the parent element (slideHeight
is 100%
by default).maintainAspectRatio="false"
and slideHeight
(unless slideHeight="100%"
); the carousel will not render correctly because the buttons and indicators will be positioned with respect to the parent.proportion
; this will lead to gaps or unwanted overflow.MatCarouselSlideComponent
import { MatCarouselSlide, MatCarouselSlideComponent } from '@ngbmodule/material-carousel';
<mat-carousel>
<mat-carousel-slide>
...
</mat-carousel-slide>
</mat-carousel>
Input | Type | Description | Default value |
---|---|---|---|
image |
string |
Image displayed in the slide. | |
overlayColor |
string |
Color of the slide's overlay. | '#00000040' |
hideOverlay |
boolean |
Toggle overlay on/off. | false |
disabled |
boolean |
Skip slide when navigating. | false |
ng test carousel --watch false
ng serve demo --source-map