Skip to content

Commit 97c7270

Browse files
BlariBlari
committed
Fix carousel
1 parent ce7a0e1 commit 97c7270

File tree

7 files changed

+1115
-952
lines changed

7 files changed

+1115
-952
lines changed

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"private": true,
1212
"dependencies": {
1313
"@agm/core": "^1.1.0",
14-
1514
"@angular/animations": "^13.2.4",
1615
"@angular/cdk": "^13.2.4",
1716
"@angular/common": "~13.2.4",
@@ -24,13 +23,12 @@
2423
"@angular/router": "~13.2.4",
2524
"@auth0/angular-jwt": "^3.0.1",
2625
"@danielmoncada/angular-datetime-picker": "^13.1.1",
27-
"@ng-select/ng-select": "^8.1.1",
28-
"@ngbmodule/material-carousel": "^0.7.2",
2926
"@fullcalendar/angular": "4.4.5-beta",
3027
"@fullcalendar/core": "4.4.2",
3128
"@fullcalendar/daygrid": "4.4.2",
3229
"@fullcalendar/interaction": "^4.4.2",
3330
"@fullcalendar/timegrid": "4.4.2",
31+
"@ng-select/ng-select": "^8.1.1",
3432
"angular-calendar": "^0.28.20",
3533
"apexcharts": "^3.35.3",
3634
"date-fns": "^2.14.0",
@@ -39,6 +37,7 @@
3937
"moment": "2.15.2",
4038
"ng-apexcharts": "^1.7.1",
4139
"ngx-echarts": "^4.2.2",
40+
"ngx-owl-carousel-o": "^7.0.2",
4241
"ngx-smart-popover": "^1.4.0",
4342
"ngx-toastr": "^12.0.1",
4443
"ngx-trend": "^5.0.1",
@@ -54,9 +53,9 @@
5453
"@angular/compiler-cli": "~13.2.4",
5554
"@angular/language-service": "~13.2.4",
5655
"@angularclass/hmr": "^3.0.0",
56+
"@types/echarts": "^4.6.7",
5757
"@types/jasmine": "~3.6.0",
5858
"@types/jasminewd2": "~2.0.8",
59-
"@types/echarts": "^4.6.7",
6059
"@types/node": "^12.12.64",
6160
"codelyzer": "^6.0.0",
6261
"ts-node": "~8.3.0",

‎src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.html

Lines changed: 21 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,91 +2,33 @@
22

33
<div class="small-carousels-wrapper">
44
<mat-card class="small-carousel-card">
5-
<mat-card-content>
6-
<mat-carousel
7-
timings="250ms ease-in"
8-
[autoplay]="true"
9-
interval="3000"
10-
maxWidth="auto"
11-
proportion="55"
12-
slides="5"
13-
[loop]="true"
14-
[hideArrows]="true"
15-
[hideIndicators]="false"
16-
[useKeyboard]="true"
17-
[useMouseWheel]="false"
18-
orientation="ltr"
19-
>
20-
<mat-carousel-slide
21-
#matCarouselSlide
22-
*ngFor="let slide of firstSmallCarousel; let i = index"
23-
[image]="slide.image"
24-
overlayColor="#00000040"
25-
[hideOverlay]="false"
26-
>
27-
</mat-carousel-slide>
28-
</mat-carousel>
29-
</mat-card-content>
5+
<owl-carousel-o [options]="customOptions">
6+
<ng-container *ngFor="let slide of digCarouselSlides">
7+
<ng-template carouselSlide [id]="slide.id">
8+
<img [src]="slide.src" [alt]="slide.alt" [title]="slide.text">
9+
</ng-template>
10+
</ng-container>
11+
</owl-carousel-o>
3012
</mat-card>
3113

3214
<mat-card class="small-carousel-card">
33-
<mat-card-content>
34-
<mat-carousel
35-
timings="250ms ease-in"
36-
[autoplay]="true"
37-
interval="3000"
38-
color="accent"
39-
maintainAspectRatio="false"
40-
maxWidth="auto"
41-
proportion="55"
42-
slides="5"
43-
[loop]="true"
44-
[hideArrows]="false"
45-
[hideIndicators]="true"
46-
[useKeyboard]="true"
47-
[useMouseWheel]="false"
48-
orientation="ltr"
49-
>
50-
<mat-carousel-slide
51-
#matCarouselSlide
52-
*ngFor="let slide of firstSmallCarousel; let i = index"
53-
[image]="slide.image"
54-
overlayColor="#00000040"
55-
[hideOverlay]="false"
56-
>
57-
</mat-carousel-slide>
58-
</mat-carousel>
59-
</mat-card-content>
15+
<owl-carousel-o [options]="customOptions">
16+
<ng-container *ngFor="let slide of digCarouselSlides">
17+
<ng-template carouselSlide [id]="slide.id">
18+
<img [src]="slide.src" [alt]="slide.alt" [title]="slide.text">
19+
</ng-template>
20+
</ng-container>
21+
</owl-carousel-o>
6022
</mat-card>
6123
</div>
6224

6325
<mat-card class="big-carousel-card">
64-
<mat-card-content>
65-
<mat-carousel
66-
timings="250ms ease-in"
67-
[autoplay]="true"
68-
interval="3000"
69-
color="accent"
70-
maxWidth="auto"
71-
proportion="25"
72-
slides="5"
73-
[loop]="true"
74-
[hideArrows]="false"
75-
[hideIndicators]="false"
76-
[useKeyboard]="true"
77-
[useMouseWheel]="false"
78-
orientation="ltr"
79-
>
80-
<mat-carousel-slide
81-
#matCarouselSlide
82-
*ngFor="let slide of digCarouselSlides; let i = index"
83-
[image]="slide.image"
84-
overlayColor="#00000040"
85-
[hideOverlay]="false"
86-
>
87-
<h3 class="big-carousel-text">{{slide.text}}</h3>
88-
</mat-carousel-slide>
89-
</mat-carousel>
90-
</mat-card-content>
26+
<owl-carousel-o [options]="customOptions">
27+
<ng-container *ngFor="let slide of firstSmallCarousel">
28+
<ng-template carouselSlide [id]="slide.id">
29+
<img [src]="slide.src" [alt]="slide.alt" [title]="slide.text">
30+
</ng-template>
31+
</ng-container>
32+
</owl-carousel-o>
9133
</mat-card>
9234

‎src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.ts

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
2-
import {routes} from '../../../../../consts';
2+
import { OwlOptions } from 'ngx-owl-carousel-o';
3+
import { routes } from '../../../../../consts';
34

45
@Component({
56
selector: 'app-carousel-page',
@@ -9,13 +10,31 @@ import {routes} from '../../../../../consts';
910
export class CarouselPageComponent {
1011
public routes: typeof routes = routes;
1112
public digCarouselSlides: any[] = [
12-
{image: './assets/carousel/big-1.png', text: 'Alaska - Glacier Bay National Park, United States'},
13-
{image: './assets/carousel/big-2.png', text: 'San Francisco – Oakland Bay Bridge, United States'},
14-
{image: './assets/carousel/big-3.png', text: 'Bali, Indonesia'}
13+
{src: './assets/carousel/big-1.png', alt: 'Alaska', text: 'Alaska - Glacier Bay National Park, United States', id: '0'},
14+
{src: './assets/carousel/big-2.png', alt: 'San Francisco', text: 'San Francisco – Oakland Bay Bridge, United States', id: '1'},
15+
{src: './assets/carousel/big-3.png', alt: 'Bali', text: 'Bali, Indonesia', id: '2'}
1516
];
1617
public firstSmallCarousel: any[] = [
17-
{image: './assets/carousel/small-1.png', text: 'Alaska - Glacier Bay National Park, United States'},
18-
{image: './assets/carousel/small-2.png', text: 'San Francisco – Oakland Bay Bridge, United States'},
19-
{image: './assets/carousel/small-3.png', text: 'Bali, Indonesia'}
20-
]
18+
{src: './assets/carousel/small-1.png', alt: 'Alaska', text: 'Alaska - Glacier Bay National Park, United States', id: '0'},
19+
{src: './assets/carousel/small-2.png', alt: 'San Francisco', text: 'San Francisco – Oakland Bay Bridge, United States', id: '1'},
20+
{src: './assets/carousel/small-3.png', alt: 'Bali', text: 'Bali, Indonesia', id: '2'}
21+
];
22+
customOptions: OwlOptions = {
23+
loop: true,
24+
mouseDrag: true,
25+
touchDrag: false,
26+
pullDrag: false,
27+
dots: false,
28+
navSpeed: 700,
29+
autoHeight: true,
30+
responsive: {
31+
0: {
32+
items: 1
33+
},
34+
400: {
35+
items: 2
36+
},
37+
},
38+
nav: true
39+
};
2140
}

‎src/app/modules/templates/ui-elements/ui-elements-routing.module.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
CardsPageComponent
1212
} from './components';
1313

14-
// import { CarouselPageComponent} from './components';
14+
import { CarouselPageComponent } from './components';
1515
import { NotificationPageComponent } from './containers';
1616
import { NavbarPageComponent } from './components/navbar-page/navbar-page.component';
1717
import { TablesDynamicPageComponent } from '../tables/containers';
@@ -37,10 +37,10 @@ const routes: Routes = [
3737
path: 'modal',
3838
component: ModalPageComponent
3939
},
40-
// {
41-
// path: 'carousel',
42-
// component: CarouselPageComponent
43-
// },
40+
{
41+
path: 'carousel',
42+
component: CarouselPageComponent
43+
},
4444
{
4545
path: 'notification',
4646
component: NotificationPageComponent

‎src/app/modules/templates/ui-elements/ui-elements.module.ts

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ import { MatInputModule } from '@angular/material/input';
1515
import { MatGridListModule } from '@angular/material/grid-list';
1616
import { MatMenuModule } from '@angular/material/menu';
1717

18-
import {SharedModule} from '../../../shared/shared.module';
18+
import { CarouselModule } from 'ngx-owl-carousel-o';
1919

20-
import {UiElementsRoutingModule} from './ui-elements-routing.module';
20+
import { SharedModule } from '../../../shared/shared.module';
21+
22+
import { UiElementsRoutingModule } from './ui-elements-routing.module';
2123

2224
import { NotificationPageComponent } from './containers';
2325
import { SuccessToastComponent } from './components/success-toast/success-toast.component';
@@ -44,8 +46,6 @@ import {
4446
GridComponent
4547
} from './popups';
4648

47-
import { MatCarouselModule } from '@ngbmodule/material-carousel';
48-
4949

5050
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
5151

@@ -80,28 +80,28 @@ import { PopoverModule } from 'ngx-smart-popover';
8080
WidgetPageComponent
8181
],
8282
imports: [
83-
CommonModule,
84-
UiElementsRoutingModule,
85-
MatToolbarModule,
86-
SharedModule,
87-
MatButtonModule,
88-
MatCardModule,
89-
MatTabsModule,
90-
MatIconModule,
91-
MatBadgeModule,
92-
MatChipsModule,
93-
MatDialogModule,
94-
MatFormFieldModule,
95-
MatInputModule,
96-
FormsModule,
97-
MatGridListModule,
98-
MatCarouselModule.forRoot(),
99-
MatTooltipModule,
100-
MatExpansionModule,
101-
MatProgressSpinnerModule,
102-
MatProgressBarModule,
103-
MatMenuModule,
104-
PopoverModule
83+
CarouselModule,
84+
CommonModule,
85+
UiElementsRoutingModule,
86+
MatToolbarModule,
87+
SharedModule,
88+
MatButtonModule,
89+
MatCardModule,
90+
MatTabsModule,
91+
MatIconModule,
92+
MatBadgeModule,
93+
MatChipsModule,
94+
MatDialogModule,
95+
MatFormFieldModule,
96+
MatInputModule,
97+
FormsModule,
98+
MatGridListModule,
99+
MatTooltipModule,
100+
MatExpansionModule,
101+
MatProgressSpinnerModule,
102+
MatProgressBarModule,
103+
MatMenuModule,
104+
PopoverModule
105105
]
106106
})
107107
export class UiElementsModule { }

‎src/custom-theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
@import '~@fullcalendar/timegrid/main.css';
55
@import "../node_modules/angular-calendar/css/angular-calendar.css";
66

7+
@import "../node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css";
8+
@import "../node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css";
9+
710
@import "src/app/styles/colors";
811
@import "src/app/styles/variables";
912
@import "src/app/styles/font";

0 commit comments

Comments
 (0)