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

Property	Data Type	Default Value	Possible values	Description
autoScrollInterval	number	3000	in milliseconds
stopScrollOnHover	boolean	TRUE	true or false
displayData	array	null	array of data to be passed	Array of data holding the values to be passed onto each card of the carousel. Data can be of any type.
orientation	string	horizontal	horizontal or vertical	Defines the orientation of the carousel, horizontally scrollable or vertically scrollable.
component	number	0	0,1,2…	"Used when multiple carousels are to be used in single project having multiple types custom-component to be passed in different carousels. The value to be passed should be a number specifing the index of the component passed in the TbCarouselLibModule.forRoot([]), which has to be used. "
dataType	string	text	text, image, custom-component
cardHeight	string	300px	height in any css acceptable unit
cardWidth	string	350px	width in any css acceptable unit
tbCardStyle	javascript object	null	example: {'margin':'auto', 'font-size':'20px'}
tbImageStyle	javascript object	null	example: {'margin':'auto', 'font-size':'20px'}
containerHeight	string	auto calculated	height in any css acceptable unit
containerWidth	string	auto calculated	width in any css acceptable unit
tbTransition	string		any acceptable css value for transition
arrowHeight	string	45px	height in any css acceptable unit
arrowColor	string		colour in any css acceptable format
arrowColorChange	string		colour in any css acceptable format
navArrowOpacity	number	0.5	0-1
showNavArrow	boolean	TRUE	true or false
visibleCards	number	5	any integer	Numbers of cards that should be visible in carousel.Most preferable values range between 3 to 7 cards but can be as many as user wishes :).Note: Applicable to Stacked Card carousel only

---

Development

Want to contribute? Great!

---

Todos

• Write Tests
• Add more types of carousels

License

MIT