IladiroAngularSliderLibrary Documentation

This library is compatible with Angular versions >=15.0.0

Note: Please use version from 0.0.12, which is compatible with Angular versions >=15.0.0, older versions are only compatible with Angular version ^15.2.0. It was my mistake! Thank you

Angular Slider plugin is flexible and easily customizable

Description

You can use the default template or pass your custom template following some configurations.

Before start

1. npm i @iladiro/angular-slider
2. Import IladiroAngularSliderLibraryModule into your module from import { IladiroAngularSliderLibraryModule } from '@iladiro/angular-slider';

Getting Setup

Use <iladiro-angular-slider></iladiro-angular-slider> selector to show the slider

Note: The example below shows the mandatory data! Slider Widget accept only Slide object type array.

<iladiro-angular-slider [slideList]="list"></iladiro-angular-slider>

Note: As default I used font awesome icons, but you can use which icons you prefer

Interface

Convert your array in an Slide object array. As you can see, all properties are not required. Import IladiroAngularSlide from import { IladiroAngularSlide } from '@iladiro/angular-slider/lib/interfaces/slide.interface';

interface IladiroAngularSlide {
    link?: string;
    mediaSrc?: string;
    tag?: string;
    title?: string;
    description?: string;
    cta?: string;
}

Examples

Note: Default template <iladiro-angular-slider [slideList]="list"> </iladiro-angular-slider>

Note: Custom template <iladiro-angular-slider [slideList]="list"> [maxVisibleSlides]="2" [paginatorArrowNext]="'fa fa-arrow-circle-o-right fa-4x'" [paginatorArrowPrev]="'fa fa-arrow-circle-o-left fa-4x'" [paginatorTemplate]="'templateOne'"> </iladiro-angular-slider>

Note: Custom dynamic template <iladiro-angular-slider [maxVisibleSlides]="1" [paginatorArrowNext]="'fa fa-arrow-circle-o-right fa-4x'" [paginatorArrowPrev]="'fa fa-arrow-circle-o-left fa-4x'" [paginatorTemplate]="'templateOne'" [slideList]="list"> <ng-template #customTemplate let-slide="slide" let-first="first" let-last="last" let-index="index" let-activeIndex="activeIndex" let-direction="direction"> <your-template [slide]="slide" [index]="index" [activeIndex]="activeIndex" [first]="first" [last]="last" [direction]="direction"> </your-template> </ng-template> </iladiro-angular-slider>

Paginator

You can choose which type of paginator to use, there are three different types.

• default
• templateOne
• templateTwo

Options

Other options are available besides the mandatory ones

property | type | required | default | notes ------------ | ------------- | ------------- | ------------- | ------------- slideList | Array<IladiroAngularSlide> | yes | undefined | This widget expect a list of Slide to show it.
maxVisibleSlides | Number | no | undefined | You can choose how many slides to show at a time paginatorTemplate | String | no | default | You can choose which type of pagination you want to use between: default, templateOne, templateTwo paginatorArrowStart | String | no | fa fa-angle-double-left | You can change the arrow that jumps to the first item in the list paginatorArrowEnd | String | no | fa fa-angle-double-right | You can change the arrow that jumps to the last item in the list paginatorArrowNext | String | no | fa fa-chevron-right | You can change the arrow that goes to the next item paginatorArrowPrev | String | no | fa fa-chevron-left | You can change the arrow that moves to the previous item paginatorMaxVisiblePages | Number | no | 5 | If you were to use the templateTwo template, you might need this option, i.e. it allows you to tell the paginator that you want to display maximum n numbers of pages customClass | String | no | undefined | You can also pass a class or a list of classes to add to the parent slide tag. It can be useful, for example, to use the default card but customize it specifically for that section clickableSlide | boolean | no | false | Set if slide is clickable or not. If set on true css cursor is type pointer

Events

Event name | Return | Description | Example ------------ | ------------- | ------------- | ------------- goNextEvent | Object Es. {page: 2, direction: 'next'} | Allows you to capture the event when the pager is used to move to the next slide | <iladiro-angular-slider (goNextEvent)="console.log($event)"></iladiro-angular-slider> goPrevEvent | Object Es. {page: 2, direction: 'prev'} | Allows you to capture the event when the pager is used to move to the previous slide | <iladiro-angular-slider (goPrevEvent)="console.log($event)"></iladiro-angular-slider> goFirstEvent | Object Es. {page: 2, direction: 'first'} | Allows you to capture the event when the pager is used to return to the first slide | <iladiro-angular-slider (goFirstEvent)="console.log($event)"></iladiro-angular-slider> goLastEvent | Object Es. {page: 2, direction: 'last'} | Allows you to capture the event when the pager is used to go to the last slide | <iladiro-angular-slider (goLastEvent)="console.log($event)"></iladiro-angular-slider> clickSlideEvent | Object of IladiroAngularSlide | Allows you to capture the event when user click on Slide | <iladiro-angular-slider (clickSlideEvent)="console.log($event)"></iladiro-angular-slider>