Skip to content

Commit d1e1506

Browse files
sheikalthafsheikalthaf
committed
vertical carousel is added and restructure the carousel with flex box
1 parent 65db26b commit d1e1506

File tree

4 files changed

+409
-229
lines changed

4 files changed

+409
-229
lines changed

‎README.md‎

Lines changed: 153 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ for ChangeLog go to [CHANGELOG.md](https://github.com/sheikalthaf/ngu-carousel/b
1010

1111
## Demo
1212

13-
Demo available [Here](https://sheikalthaf.github.io/ngu-carousel)
13+
Demo available [Here](https://sheikalthaf.github.io/ngx-carousel)
1414

1515
## Installation
1616

@@ -22,11 +22,9 @@ Include CarouselModule in your app module:
2222
import { NguCarouselModule } from '@ngu/carousel';
2323

2424
@NgModule({
25-
imports: [
26-
NguCarouselModule
27-
],
25+
imports: [NguCarouselModule]
2826
})
29-
export class AppModule { }
27+
export class AppModule {}
3028
```
3129

3230
Now ngu-carousel supports touch with the help of hammerjs
@@ -37,7 +35,6 @@ Import hammerjs in `polyfills.ts` file
3735

3836
```javascript
3937
import 'hammerjs';
40-
4138
```
4239

4340
Then use in your component:
@@ -99,7 +96,6 @@ export class SampleComponent implements OnInit {
9996
## Input Interface
10097

10198
```javascript
102-
10399
export class NguCarouselStore {
104100
type: string;
105101
deviceType: DeviceType;
@@ -125,6 +121,7 @@ export class NguCarouselStore {
125121
isFirst: boolean;
126122
isLast: boolean;
127123
RTL: boolean;
124+
vertical: Vertical;
128125
}
129126
export type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'all';
130127

@@ -133,6 +130,11 @@ export class ItemsControl {
133130
end: number;
134131
}
135132

133+
export class Vertical {
134+
enabled: boolean;
135+
height: number;
136+
}
137+
136138
export class Touch {
137139
active?: boolean;
138140
swipe: string;
@@ -152,7 +154,8 @@ export class NguCarousel {
152154
loop?: boolean;
153155
touch?: boolean;
154156
easing?: string;
155-
RTL: boolean;
157+
RTL?: boolean;
158+
vertical?: Vertical;
156159
}
157160

158161
export class Grid {
@@ -171,26 +174,26 @@ export interface Point {
171174

172175
export type Custom = 'banner';
173176
export type Animate = 'lazy';
174-
175-
176177
```
177178

178-
| Command | Type | Required | Description |
179-
| --- | --- | --- | --- |
180-
| `grid` | Object | Yes | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **all** - fixed width (When you use **all** make others 0 and vise versa) |
181-
| `slide` | number | optional | It is used to slide the number items on click |
182-
| `speed` | milli seconds | optional | It is used for time taken to slide the number items |
183-
| `interval` | milli seconds | optional | It is used to make carousel auto slide with given value. interval defines the interval between slides |
184-
| `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)"`** |
185-
| `point.visible` | boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
186-
| `point.pointStyle` | string | optional | It is used to customize the point indicator. make sure your check the guide. |
187-
| `point.hideOnSingleSlide` | boolean | optional | It is used to hide the point indicator when slide is less than one. |
188-
| `touch` | boolean | optional | It is used to active touch support to the carousel. |
189-
| `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` |
190-
| `loop` | boolean | optional | It is used to loop the `ngu-item | ngu-tile`. It must be true for `interval` |
191-
| `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 |
192-
| `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 |
193-
| `RTL` | boolean | optional | This option enable the `rtl` direction and act as rtl. By default it is `ltr` |
179+
| Command | Type | Required | Description |
180+
| ------------------------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
181+
| `grid` | Object | Yes | **xs** - mobile, **sm** - tablet, **md** - desktop, **lg** - large desktops, **all** - fixed width (When you use **all** make others 0 and vise versa) |
182+
| `slide` | number | optional | It is used to slide the number items on click |
183+
| `speed` | milli seconds | optional | It is used for time taken to slide the number items |
184+
| `interval` | milli seconds | optional | It is used to make carousel auto slide with given value. interval defines the interval between slides |
185+
| `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)"`** |
186+
| `point.visible` | boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
187+
| `point.pointStyle` | string | optional | It is used to customize the point indicator. make sure your check the guide. |
188+
| `point.hideOnSingleSlide` | boolean | optional | It is used to hide the point indicator when slide is less than one. |
189+
| `touch` | boolean | optional | It is used to active touch support to the carousel. |
190+
| `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` |
191+
| `loop` | boolean | optional | It is used to loop the `ngu-item | ngu-tile`. It must be true for `interval` |
192+
| `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 |
193+
| `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 |
194+
| `RTL` | boolean | optional | This option enable the `rtl` direction and act as rtl. By default it is `ltr` |
195+
| `vertical.enabled` | boolean | optional | This option enable the `vertical` direction |
196+
| `vertical.height` | boolean | optional | This option is used to set the height of the carousel |
194197

195198
### Custom css for Point
196199

@@ -203,33 +206,30 @@ export type Animate = 'lazy';
203206
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.
204207

205208
```html
206-
207209
<ngu-carousel
208210
[inputs]="carouselBanner"
209211
(initData)="initDataFn($event)"
210212
(onMove)="onmoveFn($event)"
211213
(carouselLoad)="loadItemsFn()">
212214
</ngu-carousel>
213-
214215
```
215216

216217
* `inputs` is an `Input` and It accepts `NguCarousel`.
217218
* `initData` is an `Output` which triggered on carousel init and it emits token to exchange with service to contol the carousel.
218219
* `onMove` is an `Output` which triggered on every slide before start and it will emit `$event` as `NguCarouselStore` object.
219220
* `carouselLoad` is an `Output` which triggered when slide reaches the end on items based on inputs `load`.
220221

221-
222222
## Carousel Service
223223

224224
```javascript
225225
import { NguCarouselService } from '@ngu/carousel';
226226
```
227+
227228
This carousel Service supports:
228229

229230
* `reset(token)` - This function will reset the carousel
230231
* `moveToSlide(token, index, animate)` - This function is used to move to index with animation control.
231232

232-
233233
# Getstarted guide
234234

235235
## Banner with Custom point style
@@ -261,7 +261,8 @@ import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
261261
<button NguCarouselNext class='rightRs'>&gt;</button>
262262
</ngu-carousel>
263263
`,
264-
styles: [`
264+
styles: [
265+
`
265266
.bannerStyle h1 {
266267
background-color: #ccc;
267268
min-height: 300px;
@@ -291,15 +292,126 @@ import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
291292
border-radius: 999px;
292293
right: 0;
293294
}
294-
`]
295+
`
296+
]
295297
})
296298
export class Sample implements OnInit {
299+
ngOnInit() {
300+
this.carouselBanner = {
301+
grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
302+
slide: 1,
303+
speed: 400,
304+
interval: 4000,
305+
point: {
306+
visible: true,
307+
pointStyles: `
308+
.ngucarouselPoint {
309+
list-style-type: none;
310+
text-align: center;
311+
padding: 12px;
312+
margin: 0;
313+
white-space: nowrap;
314+
overflow: auto;
315+
position: absolute;
316+
width: 100%;
317+
bottom: 20px;
318+
left: 0;
319+
box-sizing: border-box;
320+
}
321+
.ngucarouselPoint li {
322+
display: inline-block;
323+
border-radius: 999px;
324+
background: rgba(255, 255, 255, 0.55);
325+
padding: 5px;
326+
margin: 0 3px;
327+
transition: .4s ease all;
328+
}
329+
.ngucarouselPoint li.active {
330+
background: white;
331+
width: 10px;
332+
}
333+
`
334+
},
335+
load: 2,
336+
loop: true,
337+
touch: true
338+
};
339+
}
297340

341+
/* It will be triggered on every slide*/
342+
onmoveFn(data: NguCarouselStore) {
343+
console.log(data);
344+
}
345+
}
346+
```
298347

299-
ngOnInit(){
348+
## Banner with Vertical carousel
300349

350+
```javascript
351+
import { Component } from '@angular/core';
352+
import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
353+
354+
@Component({
355+
selector: 'app-carousel',
356+
template: `
357+
<ngu-carousel
358+
[inputs]="carouselBanner"
359+
(onMove)="onmoveFn($event)">
360+
361+
<ngu-item NguCarouselItem class="bannerStyle">
362+
<h1>1</h1>
363+
</ngu-item>
364+
365+
<ngu-item NguCarouselItem class="bannerStyle">
366+
<h1>2</h1>
367+
</ngu-item>
368+
369+
<ngu-item NguCarouselItem class="bannerStyle">
370+
<h1>3</h1>
371+
</ngu-item>
372+
373+
<button NguCarouselPrev class='leftRs'>&lt;</button>
374+
<button NguCarouselNext class='rightRs'>&gt;</button>
375+
</ngu-carousel>
376+
`,
377+
styles: [
378+
`
379+
.bannerStyle h1 {
380+
background-color: #ccc;
381+
min-height: 300px;
382+
text-align: center;
383+
line-height: 300px;
384+
}
385+
.leftRs {
386+
position: absolute;
387+
margin: auto;
388+
top: 0;
389+
bottom: 0;
390+
width: 50px;
391+
height: 50px;
392+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
393+
border-radius: 999px;
394+
left: 0;
395+
}
396+
397+
.rightRs {
398+
position: absolute;
399+
margin: auto;
400+
top: 0;
401+
bottom: 0;
402+
width: 50px;
403+
height: 50px;
404+
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
405+
border-radius: 999px;
406+
right: 0;
407+
}
408+
`
409+
]
410+
})
411+
export class Sample implements OnInit {
412+
ngOnInit() {
301413
this.carouselBanner = {
302-
grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
414+
grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
303415
slide: 1,
304416
speed: 400,
305417
interval: 4000,
@@ -335,17 +447,19 @@ export class Sample implements OnInit {
335447
},
336448
load: 2,
337449
loop: true,
338-
touch: true
339-
}
450+
touch: true, // touch is not currently in active for vertical carousel, will enable it in future build
451+
vertical {
452+
enabled: true,
453+
height: 400
454+
}
455+
};
340456
}
341457

342458
/* It will be triggered on every slide*/
343459
onmoveFn(data: NguCarouselStore) {
344460
console.log(data);
345461
}
346-
347462
}
348-
349463
```
350464

351465
## Tile with Service
@@ -579,4 +693,4 @@ export class Sample implements OnInit {
579693

580694
## License
581695

582-
[MIT](LICENSE) license.
696+
[MIT](LICENSE) license.

‎package.json‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
{
2-
"name": "ngu-carousel",
3-
"version": "1.4.6",
4-
"description": "Angular Universal carousel",
5-
"scripts": {
6-
"transpile": "ngc ",
7-
"package": "rollup -c",
8-
"minify": "uglifyjs dist/bundles/ngucarousel.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ngucarousel.umd.min.js",
9-
"build": "npm run transpile && npm run package && npm run minify",
10-
"postinstall": "npm run build"
11-
},
12-
"devDependencies": {
13-
"@angular/compiler": "^4.2.4",
14-
"@angular/compiler-cli": "^4.2.4",
15-
"@types/hammerjs": "^2.0.35",
16-
"rollup": "^0.43.0",
17-
"typescript": "^2.3.4",
18-
"uglify-js": "^3.0.19"
19-
},
20-
"dependencies": {
21-
"@angular/common": "^4.2.4",
22-
"@angular/core": "^4.2.4",
23-
"@angular/platform-browser": "^4.2.4",
24-
"hammerjs": "^2.0.8",
25-
"rxjs": "^5.5.2"
26-
},
27-
"peerDependencies": {
28-
"@angular/common": ">=4.0.0",
29-
"@angular/core": ">=4.0.0",
30-
"@angular/platform-browser": ">=4.0.0"
31-
}
2+
"name": "ngu-carousel",
3+
"version": "1.4.8",
4+
"description": "Angular Universal carousel",
5+
"scripts": {
6+
"transpile": "ngc ",
7+
"package": "rollup -c",
8+
"minify":
9+
"uglifyjs dist/bundles/ngucarousel.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ngucarousel.umd.min.js",
10+
"build": "npm run transpile && npm run package && npm run minify",
11+
"postinstall": "npm run build"
12+
},
13+
"devDependencies": {
14+
"@angular/compiler": "^4.2.4",
15+
"@angular/compiler-cli": "^4.2.4",
16+
"@types/hammerjs": "^2.0.35",
17+
"rollup": "^0.43.0",
18+
"typescript": "^2.3.4",
19+
"uglify-js": "^3.0.19"
20+
},
21+
"dependencies": {
22+
"@angular/common": "^4.2.4",
23+
"@angular/core": "^4.2.4",
24+
"@angular/platform-browser": "^4.2.4",
25+
"hammerjs": "^2.0.8",
26+
"rxjs": "^5.5.2"
27+
},
28+
"peerDependencies": {
29+
"@angular/common": ">=4.0.0",
30+
"@angular/core": ">=4.0.0",
31+
"@angular/platform-browser": ">=4.0.0"
32+
}
3233
}

0 commit comments

Comments
 (0)