uiuniversal / Ngu Carousel
Licence: mit
Angular Universal carousel
Stars: ✭ 263
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngu Carousel
ng2-carouselamos
Simple carousel/slider for angular 2.
Stars: ✭ 39 (-85.17%)
Mutual labels: slide, angular2, carousel
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-92.4%)
Mutual labels: carousel, slide
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-90.11%)
Mutual labels: carousel, angular2
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (-45.25%)
Mutual labels: carousel, slide
React Carousel
A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)
Stars: ✭ 764 (+190.49%)
Mutual labels: carousel, slide
Pagerecyclerview
PageRecyclerView achieves page turning function and unlimited carousel
Stars: ✭ 241 (-8.37%)
Mutual labels: carousel, banner
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (+113.31%)
Mutual labels: carousel, slide
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (-85.55%)
Mutual labels: angular2, banner
SRCarouselView
A carousel view that only uses two UIImageView to achieve infinite carousel.
Stars: ✭ 56 (-78.71%)
Mutual labels: carousel, banner
ngx-carousel
Angular Universal carousel is an lightweight , touchable and responsive library
Stars: ✭ 14 (-94.68%)
Mutual labels: angular2, carousel
ngx-magicsearch
Magic Search/Faceted Search Library for Angular 2
Stars: ✭ 19 (-92.78%)
Mutual labels: angular2
TileGameToolkit
A set of libraries and tools for quick development of pseudo 8-bit games in C++ or C#
Stars: ✭ 20 (-92.4%)
Mutual labels: tile
react-gesture-gallery
a react image gallery with gesture support
Stars: ✭ 14 (-94.68%)
Mutual labels: carousel
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-91.63%)
Mutual labels: angular2
ngu-carousel
Angular Universal carousel
Note: This carousel doesn't include any css. go and customize css for buttons, items except ngucarousel and ngucarousel-inner
Demo
Demo available in Stackblitz Here
Demo available Here
Installation
Angular Version | ngu-carousel Version |
---|---|
Angular >= 10 | npm i --save @ngu/[email protected] |
Angular = 9 | npm i --save @ngu/[email protected] |
Angular < 9 | npm i --save @ngu/[email protected] |
Optional Dependencies
hammer.js
Now ngu-carousel supports touch with the help of hammerjs.
You can install and import it in the main.ts
file like this
npm install hammerjs --save
// main.ts
import 'hammerjs';
Usage
- Include CarouselModule in your app module:
import { NguCarouselModule } from '@ngu/carousel';
@NgModule({
imports: [NguCarouselModule]
})
export class AppModule {}
- Then use in your component:
import { Component, OnInit } from '@angular/core';
import { NguCarouselConfig } from '@ngu/carousel';
@Component({
selector: 'sample',
template: `
<ngu-carousel #myCarousel [inputs]="carouselTile" [dataSource]="carouselTileItems">
<ngu-tile *nguCarouselDef="let item; let i = index">
<ngu-carousel #myCarousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad(i)" [dataSource]="carouselTiles[i]">
<ngu-tile *nguCarouselDef="let item; let j = index">
<div class="tile" [style.background]="'url(' + item + ')'" style="min-height: 200px">
<h1>{{j}}</h1>
</div>
</ngu-tile>
<button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1"><</button>
<button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">></button>
<ul class="myPoint" NguCarouselPoint>
<li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"
[style.background]="'url(' + carouselTileItems[j] + ')'"></li>
</ul>
</ngu-carousel>
</ngu-tile>
<button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1"><</button>
<button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">></button>
<ul class="myPoint" NguCarouselPoint>
<li *ngFor="let i of myCarousel.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"
[style.background]="'url(' + carouselTileItems[i] + ')'"></li>
</ul>
</ngu-carousel>
`,
})
export class SampleComponent implements OnInit {
imgags = [
'assets/bg.jpg',
'assets/car.png',
'assets/canberra.jpg',
'assets/holi.jpg'
];
public carouselTileItems: Array<any> = [0, 1, 2, 3, 4, 5];
public carouselTiles = {
0: [],
1: [],
2: [],
3: [],
4: [],
5: []
};
public carouselTile: NguCarouselConfig = {
grid: { xs: 1, sm: 1, md: 3, lg: 3, all: 0 },
slide: 3,
speed: 250,
point: {
visible: true
},
load: 2,
velocity: 0,
touch: true,
easing: 'cubic-bezier(0, 0, 0.2, 1)'
};
constructor() {}
ngOnInit() {
this.carouselTileItems.forEach(el => {
this.carouselTileLoad(el);
});
}
public carouselTileLoad(j) {
// console.log(this.carouselTiles[j]);
const len = this.carouselTiles[j].length;
if (len <= 30) {
for (let i = len; i < len + 15; i++) {
this.carouselTiles[j].push(
this.imgags[Math.floor(Math.random() * this.imgags.length)]
);
}
}
}
}
Input Interface
export class NguCarouselStore {
type: string;
deviceType: DeviceType;
token: string;
items: number;
load: number;
deviceWidth: number;
carouselWidth: number;
itemWidth: number;
visibleItems: ItemsControl;
slideItems: number;
itemWidthPer: number;
itemLength: number;
currentSlide: number;
easing: string;
speed: number;
transform: Transfrom;
loop: boolean;
dexVal: number;
touchTransform: number;
touch: Touch;
isEnd: boolean;
isFirst: boolean;
isLast: boolean;
RTL: boolean;
vertical: Vertical;
}
export type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'all';
export class ItemsControl {
start: number;
end: number;
}
export class Vertical {
enabled: boolean;
height: number;
}
export class Touch {
active?: boolean;
swipe: string;
velocity: number;
}
export class NguCarouselConfig {
grid: Transfrom;
gridBreakpoints?: Breakpoints;
slide?: number;
speed?: number;
interval?: CarouselInterval;
animation?: Animate;
point?: Point;
type?: string;
load?: number;
custom?: Custom;
loop?: boolean;
touch?: boolean;
easing?: string;
RTL?: boolean;
button?: NguButton;
vertical?: Vertical;
velocity?: number;
}
export class Grid {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
all: number;
}
export interface Point {
visible: boolean;
hideOnSingleSlide?: boolean;
}
export type Custom = 'banner';
export type Animate = 'lazy';
Command | Type | Required | Description |
---|---|---|---|
grid |
Object | Yes | xs - mobile, sm - tablet, md - desktop, lg - large desktops, xl - extra large desktops, all - fixed width (When you use all make others 0 and vise versa) |
gridBreakpoints |
Object | optional | Determines the browser width in pixels that the grid displays the intended number of tiles. default: {sm: 768, md: 992, lg: 1200, xl: 1200}
|
slide |
number | optional | It is used to slide the number items on click |
speed |
milli seconds | optional | It is used for time taken to slide the number items |
interval |
milli seconds | optional | It is used to make carousel auto slide with given value. interval defines the interval between slides |
load |
number | optional | is used to load the items similar to pagination. the carousel will tigger the carouslLoad function to load another set of items. it will help you to improve the performance of the app.(carouselLoad)="myfunc($event)"
|
point.visible |
boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
point.hideOnSingleSlide |
boolean | optional | It is used to hide the point indicator when slide is less than one. |
touch |
boolean | optional | It is used to active touch support to the carousel. |
easing |
string | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like ease ,ease-in
|
loop |
boolean | optional | It is used to loop the `ngu-item |
animation |
string | optional | It is used to animate the sliding items. currently it only supports lazy . more coming soon and also with custom css animation option |
custom |
string | optional | It is you to define the purpose of the carousel. currently it only supports banner . more coming soon and also with custom css animation option |
RTL |
boolean | optional | This option enable the rtl direction and act as rtl. By default it is ltr
|
vertical.enabled |
boolean | optional | This option enable the vertical direction |
vertical.height |
boolean | optional | This option is used to set the height of the carousel |
Custom css for Point
<ul class="ngucarouselPoint">
<li *ngFor="let i of pointNumbers; let i = index" [class.active]="i==pointers"></li>
</ul>
This is HTML I'm using in the carousel. Add your own css according to this elements in pointStyles
. check below guide for more details.
<ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)" (carouselLoad)="loadItemsFn()">
</ngu-carousel>
-
inputs
is anInput
and It acceptsNguCarouselConfig
. -
onMove
is anOutput
which triggered on every slide before start and it will emit$event
asNguCarouselStore
object. -
carouselLoad
is anOutput
which triggered when slide reaches the end on items based on inputsload
.
Getstarted guide
Banner with Custom point style
import { Component } from '@angular/core';
import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
@Component({
selector: 'app-carousel',
template: `
<ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)">
<ngu-item NguCarouselItem class="bannerStyle">
<h1>1</h1>
</ngu-item>
<ngu-item NguCarouselItem class="bannerStyle">
<h1>2</h1>
</ngu-item>
<ngu-item NguCarouselItem class="bannerStyle">
<h1>3</h1>
</ngu-item>
<button NguCarouselPrev class="leftRs"><</button>
<button NguCarouselNext class="rightRs">></button>
</ngu-carousel>
`,
styles: [
`
.bannerStyle h1 {
background-color: #ccc;
min-height: 300px;
text-align: center;
line-height: 300px;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
border-radius: 999px;
left: 0;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
border-radius: 999px;
right: 0;
}
`
]
})
export class Sample implements OnInit {
ngOnInit() {
this.carouselBanner = {
grid: { xs: 1, sm: 1, md: 1, lg: 1, xl:1, all: 0 },
slide: 1,
speed: 400,
interval: {
timing: 3000,
initialDelay: 1000
},
point: {
visible: true
},
load: 2,
loop: true,
touch: true
};
}
/* It will be triggered on every slide*/
onmoveFn(data: NguCarouselStore) {
console.log(data);
}
}
Banner with Vertical carousel
import { Component } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';
@Component({
selector: 'app-carousel',
template: `
<ngu-carousel
[inputs]="carouselBanner"
(onMove)="onmoveFn($event)">
<ngu-item NguCarouselItem class="bannerStyle">
<h1>1</h1>
</ngu-item>
<ngu-item NguCarouselItem class="bannerStyle">
<h1>2</h1>
</ngu-item>
<ngu-item NguCarouselItem class="bannerStyle">
<h1>3</h1>
</ngu-item>
<button NguCarouselPrev class='leftRs'><</button>
<button NguCarouselNext class='rightRs'>></button>
</ngu-carousel>
`,
styles: [
`
.bannerStyle h1 {
background-color: #ccc;
min-height: 300px;
text-align: center;
line-height: 300px;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
left: 0;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
right: 0;
}
.ngucarouselPoint {
list-style-type: none;
text-align: center;
padding: 12px;
margin: 0;
white-space: nowrap;
overflow: auto;
position: absolute;
width: 100%;
bottom: 20px;
left: 0;
box-sizing: border-box;
}
.ngucarouselPoint li {
display: inline-block;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
padding: 5px;
margin: 0 3px;
transition: .4s ease all;
}
.ngucarouselPoint li.active {
background: white;
width: 10px;
}
`
]
})
export class Sample implements OnInit {
ngOnInit() {
this.carouselBanner = {
grid: { xs: 1, sm: 1, md: 1, lg: 1, xl:1, all: 0 },
slide: 1,
speed: 400,
interval: 4000,
point: {
visible: true
},
load: 2,
loop: true,
touch: true, // touch is not currently in active for vertical carousel, will enable it in future build
vertical {
enabled: true,
height: 400
}
};
}
/* It will be triggered on every slide*/
onmoveFn(data: NguCarousel) {
console.log(data);
}
}
Tile with Carousel Control
import { Component } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';
@Component({
selector: 'app-carousel',
template: `
<ngu-carousel #carousel
[inputs]="carouselTile"
(carouselLoad)="carouselTileLoad($event)">
<ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
<h1>{{Tile + 1}}</h1>
</ngu-tile>
<button NguCarouselPrev class='leftRs'><</button>
<button NguCarouselNext class='rightRs'>></button>
</ngu-carousel>
<button (click)="resetFn()">Reset</button>
`,
styles: [`
h1{
min-height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
left: 0;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
right: 0;
}
`]
})
export class Sample implements OnInit {
private carouselToken: string;
public carouselTileItems: Array<any>;
public carouselTile: NguCarouselConfig;
@ViewChild('carousel') carousel: NguCarousel;
constructor() { }
ngOnInit(){
this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
this.carouselTile = {
grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
slide: 2,
speed: 400,
animation: 'lazy',
point: {
visible: true
},
load: 2,
touch: true,
easing: 'ease'
}
}
initDataFn(key: NguCarouselStore) {
this.carouselToken = key.token;
}
resetFn() {
this.carousel.reset(this.carouselToken);
}
moveToSlide() {
this.carousel.moveToSlide(this.carouselToken, 2, false);
}
public carouselTileLoad(evt: any) {
const len = this.carouselTileItems.length
if (len <= 30) {
for (let i = len; i < len + 10; i++) {
this.carouselTileItems.push(i);
}
}
}
// carouselLoad will trigger this funnction when your load value reaches
// it is helps to load the data by parts to increase the performance of the app
// must use feature to all carousel
}
Tile with custom point style
import { Component } from '@angular/core';
import { NguCarousel } from '@ngu/carousel';
@Component({
selector: 'app-carousel',
template: `
<ngu-carousel
[inputs]="carouselTile"
(carouselLoad)="carouselTileLoad($event)">
<ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
<h1>{{Tile + 1}}</h1>
</ngu-tile>
<button NguCarouselPrev class='leftRs'><</button>
<button NguCarouselNext class='rightRs'>></button>
</ngu-carousel>
`,
styles: [`
h1{
min-height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
left: 0;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
right: 0;
}
`]
})
export class Sample implements OnInit {
public carouselTileItems: Array<any>;
public carouselTile: NguCarousel;
ngOnInit(){
this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
this.carouselTile = {
grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
slide: 2,
speed: 400,
animation: 'lazy',
point: {
visible: true,
pointStyles: `
.ngucarouselPoint {
list-style-type: none;
text-align: center;
padding: 12px;
margin: 0;
white-space: nowrap;
overflow: auto;
box-sizing: border-box;
}
.ngucarouselPoint li {
display: inline-block;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.55);
padding: 4px;
margin: 0 3px;
transition-timing-function: cubic-bezier(.17, .67, .83, .67);
transition: .4s;
}
.ngucarouselPoint li.active {
background: #6b6b6b;
transform: scale(1.2);
}
`
},
load: 2,
touch: true,
easing: 'ease'
}
}
public carouselTileLoad(evt: any) {
const len = this.carouselTileItems.length
if (len <= 30) {
for (let i = len; i < len + 10; i++) {
this.carouselTileItems.push(i);
}
}
}
// carouselLoad will trigger this funnction when your load value reaches
// it is helps to load the data by parts to increase the performance of the app
// must use feature to all carousel
}
License
MIT license.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Code Veins 💻 |
Marcin Czachurski 💻 |
Alexander Buiko 💻 |
Frido Koch 💻 |
Giorgio Modoni 💻 |
faran312 💻 |
Euan Goddard 💻 |
Santosh Yadav 💻 |
Tiago Magalhães 📖 |
Sam Vloeberghs 📖 |
rat-matheson 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
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].