angular-custom-carousel
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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.

Edit on StackBlitz ⚡️

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).

Package Sidebar

Install

npm i angular-custom-carousel

Weekly Downloads

4

Version

1.0.5

License

none

Unpacked Size

102 kB

Total Files

20

Last publish

Collaborators

  • thebassemnabil