custom-carousel v14.0.1

Basic LightWeight Crousel

Light Weight Configurable Carousel

Dependency

-- Bootstrap Icons v1.10.2

USE --

Add import { CustomCarouselModule } from 'custom-carousel' in you module.

Import CustomCarouselModule in Imports

Use selector <custom-crousel></custom-crousel>

[slidesData] to insert Data in crousel. Declare your variable with Slides[] type

[carouselConfig] to use its Configuration

Use <ng-template> if your using card-crousel

Example --

<custom-crousel [slidesData]="crouselData" [carouselConfig]="carouselConfig" [customTemplate]="childTemplate">
    <ng-template #childTemplate>
        <ng-container *ngFor="let item of cardData">
            <div class="slide-card">
            <!-- code here  -->
            </div>
        </ng-container>
    </ng-template>
</custom-crousel>

Exapmle Config

carouselConfig: Configuration = {
    type: 'card',
    dots: {
      show: true,
      showImage: true,
    },
    setTimer: {
      show:true,
      time: 3,
      direction: 'backword',
    },
    transition: {
      fadeIn: true,
    },
    styling: {
      border:'2px solid red',
      borderRadius: '0px',
      button: {
        hideButton:true,
        backgroundColor: 'transparent',
        height:'80px',
        width:'80px',
        border:'1px solid red',
        borderRadius: '1px',
        color: 'green',
        fontSize: '24px',
        leftIcon: 'bi bi-arrow-left-circle',
        rightIcon: 'bi bi-arrow-right-circle',
      },
      dots: {
        border: '1px solid red',
        borderRadius: '0px',
        backgroundColor: '#000000',
        height:'40px',
        width:'40px'
        hoverDotsBackgroundColor: '#254125',
      },
    },

Example of Image Carousel Data

  dataForSlides: Slides[] = [
    { id: 1, image: './assets/image/image-1.jpg' },
    { id: 2, image: './assets/image/image-2.jpg' },
    { id: 3, image: './assets/image/image-3.jpg' },
    { id: 4, image: './assets/image/image-4.jpg' },
  ];

Example Card Crousel

`<custom-crousel [slidesData]="crouselData" [carouselConfig]="carouselConfig"[customTemplate]="childTemplate"></custom-crousel>`

 <ng-template #childTemplate>
     <ng-container *ngFor="let item of cardData">
         <div class="slide-card">
             <!-- Changeable  -->
             <span>{{item}}</span>
         </div>
     </ng-container>
 </ng-template>

Example Image Crousel

<custom-crousel [slidesData]="crouselData" [carouselConfig]="carouselConfig"></custom-crousel>

## You can take reference from samplecrousel component as example