Angular Custom Carousel
Angular-Custom-Carousel is A simple solution for carousel or slider. HTML is yours, it allows you to 100% customization on your css and html.
you are not forced to use any styles.
Installation
Install the npm package.
npm i angular-custom-carousel
Import module:
import { NgCarouselModule } from 'angular-custom-carousel';
@NgModule({
imports: [
NgCarouselModule
.....
]
})
Usage
-
add the directive selector (bassCarouselInit) on container div that have 'ul' and give it the inputs it need (carousalContainerClass, carousalULClass, carousalPreviousClass, carousalNextClass).
-
add Previous button and give it directive selector (bassCarouselPrevious) (carousalContainerClass, carousalULClass, carousalPreviousClass, carousalNextClass, pxPerClick)
-
add Next button and give it directive selector (bassCarouselNext) (carousalContainerClass, carousalULClass, carousalPreviousClass, carousalNextClass, pxPerClick)
ex:
<div class="mt-5">
<div class="d-flex justify-content-center">
<div class="d-flex overflow-hidden demoContainer" style="width: 500px;height: 500px;"
bassCarouselInit [carousalContainerClass]="'demoContainer'" [carousalULClass]="'demoUL'" [carousalPreviousClass]="'demoprev'"
[carousalNextClass]="'demonext'">
<ul class="d-flex align-items-center bg-primary text-white demoUL overflow-hidden">
<div style="min-width: 500px;">sliedr 1</div>
<div style="min-width: 500px;">sliedr 2</div>
<div style="min-width: 500px;">sliedr 3</div>
</ul>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-warning mr-5 demoprev"
bassCarouselPrevious [carousalContainerClass]="'demoContainer'"
[pxPerClick]="250" [carousalULClass]="'demoUL'" [carousalPreviousClass]="'demoprev'" [carousalNextClass]="'demonext'">Previous</button>
<button type="button" class="btn btn-warning demonext"
bassCarouselNext [carousalContainerClass]="'demoContainer'"
[pxPerClick]="250" [carousalULClass]="'demoUL'" [carousalPreviousClass]="'demoprev'"
[carousalNextClass]="'demonext'">Next</button>
</div>
</div>
Directive options ( inputs )
- carousalContainerClass : container class of the div that hold the ul.
- carousalULClass : class of ul.
- carousalPreviousClass : class of the Previous button.
- carousalNextClass : class of the Next button.
- pxPerClick : the px you want to scroll (250 px to the left.. etc).