tb-carousel-lib

tb-carousel-lib is a collection of responsive carousels for Angular based Web Applications.

• Simply import the angular module using npm and use it within your components.
• Customisable using property binding.

Demo of tb-carousel can be seen at

https://pavvank.github.io/tb-carousel

Features!

• Choose from a variety of styled Carousels.

  • Basic carousel tb-carousel-basic
  • Stacked card carousel tb-carousel-stacked-card
  • 3D carousel tb-carousel-three-d

• Available in both horizontal and vertical scrolling behaviours.

• Accepts various kinds of data formats :

  • Images
  • Text
  • User defined components

  By using custom components, the structure of the data within each card, of the collection can be easily diplayed in carousel.

NOTE : Do not use sizes in percentage. If want to stretch to complete page just use 100vh for height and 100vw for width or any other css unit. Percentages do not work great as of now :( .

Installation

tb-carousel-lib requires Node.js v4+ to run.

From the existing angular application directory, use the following command to install tb-carousel-lib :

$ npm install tb-carousel-lib 

How to use

Importing the module

Import the TbCarouselLibModule into your app.module.ts

import { TbCarouselLibModule } from 'tb-carousel-lib'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TbCarouselLibModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using with user defined component in carousel.

• If the data to be passed to carousel is from a user defined component then
  TbCarouselLibModule.forRoot([{userDefinedComp : UserDefinedComponent}]) method is to be used to pass the desired component.
• Also (user defined component) has to passed to the : entryComponents: [UserDefinedComponent] in app.module.ts . Here UserDefinedComponent is the user defined component.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TbCarouselLibModule } from 'tb-carousel-lib';
import { UserDefinedComponent } from './user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserDefinedComponent
  ],
  imports: [
    BrowserModule,
    TbCarouselLibModule.forRoot([{userDefinedComp : UserDefinedComponent}])
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [UserDefinedComponent]
})
export class AppModule { }

Using in the component

To get the carousel at the desired location within the HTML code, simply insert the respective carousel tag, with any other optional data Or required properties.

Simple Illustration: A Stacked Card style Horizontal Carousal in app.component.html

<div class="container">
  <tb-carousel-stacked-card 
    dataType="text" 
    [displayData]="dataText" 
    orientation="horizontal"
    cardHeight="300px" 
    cardWidth="350px"  
    arrowHeight="30px"
    [tbCardStyle]="{'background-color': 'pink', 'border' : '5px solid green'}"
    [showNavArrow]="true">
  </tb-carousel-stacked-card>
</div>

Usage with user defined component in carousel.

To pass a custom component into carousel ,first make a new component and define its HTML structure and style as usual using css (anything) and define a model class having its data structure. and use that model class object as an input to the component. The input to the component will be passed as an array of that model object ,using property binding to the respective carousel.

Lets consider a user defined component with following files.

• custom.component.ts
• custom.component.html
• custom.component.css
• custom.model.ts

custom.model.ts

export class Custom{
    id : number;
    imageSrc : string;
    heading : string;
    content : string;
    
    constructor(id : number, imageSrc : string, heading : string, 
         content : string){
         this.id = id;
         this.imageSrc = imageSrc;
         this.heading = heading;
         this.content = content;
    }
}

custom.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Custom } from './custom.model';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {

  @Input('modelObject') _tbModelObject : Custom;

  constructor() { }

  ngOnInit() {
  }
}

Note : The name of the variable for property binding in @input must be _tbModelObject

custom.component.html

<div class="parent">
    <div class="content">
        <h2>{{_tbModelObject.heading}}</h2>
        <hr>
        <img [src]="_tbModelObject.imageSrc" alt="">
        <p>{{_tbModelObject.content}}</p>
    </div>
</div>

Once the component is made according to the requirement the data can be passed to the respective tb-carousal* component.

app.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class AppComponent implements OnInit {

  dataComponent: Custom[] = [
    new Custom(101, "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/220px-FullMoon2010.jpg", "Moon", "Description"),
    new Custom(102, "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Sun_poster.svg/500px-Sun_poster.svg.png", "Sun", "Description"),
    new Custom(103, "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg", "Earth", "Description"),
  ];

  constructor() { }

  ngOnInit() {
  }
}

app.component.html

<div class="container">
  <tb-carousel-stacked-card 
    dataType="custom-component" 
    [displayData]="dataComponent" 
    orientation="horizontal" 
    component="2"
    cardHeight="300px" 
    cardWidth="350px" 
    [tbCardStyle]="{'background-color': 'yellow', 'border': '10px solid green', 'overflow':'hidden'}"
    [stopScrollOnHover]="true"
    visibleCards="3">
  </tb-carousel-stacked-card>
</div>

Poperties of the carousel for data-binding

Development

Want to contribute? Great!

Todos

• Write Tests
• Add more types of carousels

License

MIT