All Projects → kappys1 → Angular2 Carousel

kappys1 / Angular2 Carousel

Licence: mit
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angular2 Carousel

Ngx Echarts
An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
Stars: ✭ 820 (+3053.85%)
Mutual labels:  ng2, angular2, ngx
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+7769.23%)
Mutual labels:  carousel, touch, responsive
Angular Google Maps
Angular 2+ Google Maps Components
Stars: ✭ 1,982 (+7523.08%)
Mutual labels:  ng2, angular2, angular4
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+6015.38%)
Mutual labels:  ng2, angular2, angular4
ng-elm
Write Angular components in Elm.
Stars: ✭ 41 (+57.69%)
Mutual labels:  angular2, ng2, ngx
Ngx Date Fns
⏳ date-fns pipes for Angular 2.0 and above ⏳
Stars: ✭ 135 (+419.23%)
Mutual labels:  ng2, angular2, ngx
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: ✭ 23,286 (+89461.54%)
Mutual labels:  ng2, angular2, responsive
Paper Kit 2 Angular
Free Bootstrap 4 UI Kit for Angular 2+
Stars: ✭ 133 (+411.54%)
Mutual labels:  angular2, responsive, angular4
awesome-angular
💖 A list of awesome Angular (2️⃣➕) resources
Stars: ✭ 61 (+134.62%)
Mutual labels:  angular2, ng2, ngx
ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
Stars: ✭ 24 (-7.69%)
Mutual labels:  angular2, ng2, angular4
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (+100%)
Mutual labels:  ng2, angular2, angular4
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (+46.15%)
Mutual labels:  angular2, ng2, angular4
Ngx File Drop
Angular 11 file and folder drop library
Stars: ✭ 220 (+746.15%)
Mutual labels:  angular2, angular4, ngx
Ng2 Search Filter
Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 100K+ downloads
Stars: ✭ 137 (+426.92%)
Mutual labels:  ng2, angular2, angular4
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (+550%)
Mutual labels:  angular2, angular4, ngx
Truly Ui
Truly-UI - Web Angular UI Components for Desktop Applications (Electron, NW, APP JS)
Stars: ✭ 195 (+650%)
Mutual labels:  ng2, angular2, angular4
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (+207.69%)
Mutual labels:  angular2, responsive, angular4
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (+284.62%)
Mutual labels:  angular2, responsive, angular4
angular2-signature-pad
Signature pad component for Angular 2.x and above.
Stars: ✭ 17 (-34.62%)
Mutual labels:  angular2, ng2, angular4
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+584.62%)
Mutual labels:  responsive, touch, carousel

Angular2-Carousel

OLD VERSION - DEPRECATED VERSION

npm version Build Status Coverage Status Angular2+ Angular2+ licence

An lightweight, touchable and responsive library to create a carousel for angular 2+

NEW VERSION HERE NX-ANGUAR

I make a new version for angular, compatible with 7.0.0 without dependencies. NO MORE HAMMER

ngx-carousel-lib NPM

ngx-carousel-lib github

ngx-carousel-lib web

.

.

.

.

.

.

.

Demo

demos available here

Install

You can install the package from our npm package

 npm install --save angular2-carousel

check if not install all peer dependencies:

npm install @types/hammerjs
npm install hammerjs

Usage

First tou need to provide the CarouselModule to your desired Module

import {CarouselModule} from "angular2-carousel";

// In your App's module or Custom Module:
@NgModule({
    imports: [
       CarouselModule
    ] 
})

note : if you install library from github, you should import from angular2-carousel/dist

Now, you can use CarouselModule as follow:

<carousel-component >
    <div class="item-carousel">a</div>
    <div class="item-carousel">
        <div class="b">
            <img/>
            .
            .
            .
        </div>
    </div>
    <div class="item-carousel">c</div>
    <div class="item-carousel">d</div>
</carousel-component>

All slides of carousel must have .item-carousel

Preview

API Documentation

you can see here or in web

Author

Alex Marcos Gutierrez TMTFactory

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].