# tb-carousel-lib > A collection of carousels for Angular based application Latest version **1.3.1** (published 2019-02-18) · MIT license · 0 weekly downloads ## Install ```sh npm install tb-carousel-lib pnpm add tb-carousel-lib yarn add tb-carousel-lib bun add tb-carousel-lib ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.1 | | Published | 2019-02-18 | | First published | 2019-01-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 895.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Pavan Kumar | | Maintainers | pavvank | | Keywords | Angular, Carousel | ## Links - npm: https://www.npmjs.com/package/tb-carousel-lib - Repository: https://github.com/pavvank/tb-carousel - Issues: https://github.com/pavvank/tb-carousel/issues - npm.io page: https://npm.io/package/tb-carousel-lib ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.3.1 (latest) — 2019-02-18 - 1.3.0 — 2019-02-18 - 1.2.0 — 2019-02-14 - 1.1.0 — 2019-02-02 - 1.0.0 — 2019-01-26 - 0.0.2 — 2019-01-25 - 0.0.1 — 2019-01-20 ## README # 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. --- ### **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](https://nodejs.org/) v4+ to run. From the existing angular application directory, use the following command to install tb-carousel-lib : ```sh $ npm install tb-carousel-lib ``` --- ### **How to use** #### **Importing the module** --- Import the *TbCarouselLibModule* into your **app.module.ts** ```typescript 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. ```typescript 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** ```html
``` ##### **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** ```typescript 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** ```typescript 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** ```html

{{_tbModelObject.heading}}

{{_tbModelObject.content}}

``` Once the component is made according to the requirement the data can be passed to the respective tb-carousal* component. **app.component.ts** ```typescript 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** ```html
``` --- ### **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 [//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax) [dill]: [git-repo-url]: [john gruber]: [df1]: [markdown-it]: [Ace Editor]: [node.js]: [Twitter Bootstrap]: [jQuery]: [@tjholowaychuk]: [express]: [AngularJS]: [Gulp]: [PlDb]: [PlGh]: [PlGd]: [PlOd]: [PlMe]: [PlGa]: --- _Source: https://npm.io/package/tb-carousel-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._