diff --git a/angular.json b/angular.json index 73215d4..7139b38 100644 --- a/angular.json +++ b/angular.json @@ -21,12 +21,17 @@ "src/favicon.ico" ], "styles": [ + "node_modules/slick-carousel/slick/slick.scss", + "node_modules/slick-carousel/slick/slick-theme.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/sass/paper-kit.scss", "src/assets/css/demo.css", "src/assets/css/nucleo-icons.css" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/slick-carousel/slick/slick.min.js" + ] }, "configurations": { "production": { diff --git a/package.json b/package.json index 4ce7cca..1c87a3b 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,15 @@ "@ng-bootstrap/ng-bootstrap": "6.0.0", "bootstrap": "4.1.2", "core-js": "3.6.4", - "jquery": "3.5.0", + "jquery": "^3.5.1", "jw-bootstrap-switch-ng2": "2.0.1", "ng2-nouislider": "1.7.12", + "ngx-slick-carousel": "^0.5.0", "nouislider": "9.2.0", "popper.js": "1.14.4", "rxjs": "6.5.4", "rxjs-compat": "6.5.4", + "slick-carousel": "^1.8.1", "zone.js": "0.10.2" }, "devDependencies": { diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index c07e967..564e363 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms'; import { NouisliderModule } from 'ng2-nouislider'; import { JwBootstrapSwitchNg2Module } from 'jw-bootstrap-switch-ng2'; import { RouterModule } from '@angular/router'; +import { SlickCarouselModule } from 'ngx-slick-carousel'; import { TeamSectionComponent } from './teamSection/teamSection.component'; @@ -23,6 +24,7 @@ import { TechBlogComponent } from './tech-blog/tech-blog.component'; FormsModule, NgbModule, NouisliderModule, + SlickCarouselModule, RouterModule, JwBootstrapSwitchNg2Module ], diff --git a/src/app/components/our-work/our-work.component.html b/src/app/components/our-work/our-work.component.html index 09afe51..371cc58 100644 --- a/src/app/components/our-work/our-work.component.html +++ b/src/app/components/our-work/our-work.component.html @@ -1,28 +1,23 @@
-

Our Work

-
-
- -
- Card image cap +

Our Work

+ +
+ + Project Image
-
{{project.projectName}} -
-

{{project.description}}

- +
{{project.projectName}} + +
+

{{project.description}}

-
- +
-
+
-
+
\ No newline at end of file diff --git a/src/app/components/our-work/our-work.component.scss b/src/app/components/our-work/our-work.component.scss index 006a2aa..c5a1af5 100644 --- a/src/app/components/our-work/our-work.component.scss +++ b/src/app/components/our-work/our-work.component.scss @@ -1,28 +1,17 @@ .project { - margin: 2px 20px; - width: 18rem; - - @media screen and (max-width: 995px) { - margin: 2px 12px; - } - - @media screen and (max-width: 398px) { - margin: 2px 5px; - width: 250px; - } + cursor: pointer; + height: 100%; +} - @media screen and (max-width: 398px) { - margin: 2px 5px; - width: 220px; - } +.slick-slider { + width: 85%; + margin: auto; } -.slider_button { - display: block; - margin-bottom: auto; - margin-top: auto; +.prev-slide { + left: -33px; } -.work-section { - margin-top: 5vh; +.next-slide { + right: -33px; } diff --git a/src/app/components/our-work/our-work.component.ts b/src/app/components/our-work/our-work.component.ts index 46cb6e4..e90a65f 100644 --- a/src/app/components/our-work/our-work.component.ts +++ b/src/app/components/our-work/our-work.component.ts @@ -11,19 +11,11 @@ import { ProjectCardComponent } from '../project-card/project-card.component'; }) export class OurWorkComponent implements OnInit { - private displayCount; - public listedProjects; - private clicker = 0; + projects: any = projects; constructor(private modalService: NgbModal) { } - @HostListener('window:resize', ['$event']) - onResize(event) { - this.adjustScreen(event.target.innerWidth); - } - ngOnInit() { - this.adjustScreen(window.innerWidth); } showProjectCard(data) { @@ -31,31 +23,16 @@ export class OurWorkComponent implements OnInit { card.open(data); } - foward() { - if (this.clicker < projects.length - this.displayCount) { - this.clicker++; - this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker); - } - } - - backward() { - if (this.clicker > 0) { - this.clicker--; - this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker); - } - } + slideConfig = { + "slidesToShow": 3, + "slidesToScroll": 1, + "nextArrow": "
", + "prevArrow": "
", + "autoplay": true, + "autoplaySpeed": 2000, + "adaptiveHeight": true, + "dots": true, + "infinite": true + }; - adjustScreen(width) { - if (width <= 767) { - this.displayCount = 1; - } else if (width < 770) { - this.displayCount = 2; - } - else if (width < 1300) { - this.displayCount = 2; - } else { - this.displayCount = 3; - } - this.listedProjects = projects.slice(0, this.displayCount); - } } diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index 9438dc9..4ee21b6 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -1,22 +1,30 @@
 
+
-
{{data.name}}
+
{{data.name}}
{{data.description}}
- +
diff --git a/src/app/components/project-card/project-card.component.scss b/src/app/components/project-card/project-card.component.scss index 1abea42..35f39fe 100644 --- a/src/app/components/project-card/project-card.component.scss +++ b/src/app/components/project-card/project-card.component.scss @@ -36,3 +36,8 @@ color: #000000; font-size: large; } + +.checkProjects{ + margin-top: 10px; + color: gray; +}