Project Carousel

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": {

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": {

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
     ],

src/app/components/our-work/our-work.component.html

@@ -1,28 +1,23 @@
 <div class="section">
     <div class="container">
-        <h2>Our Work</h2>
-        <div class="work-section">
-            <div class="row justify-content-center">
-                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="backward()"><i
-                        class="fa fa-angle-left"></i></button>
-                <div class="project card" *ngFor="let project of listedProjects">
-                    <img class="card-img-top" src="assets/img/work/{{project.image}}" alt="Card image cap">
+        <h2 class="title">Our Work</h2>
+        <ngx-slick-carousel class="carousel project" #slickModal="slick-carousel" [config]="slideConfig">
+            <div ngxSlickItem *ngFor="let project of projects" class="slide card">
+                <a  (click)="showProjectCard({
+                                        image:project.image,
+                                        description: project.largeDescription,
+                                        name: project.projectName,
+                                        github: project.github|| null})">
+                    <img class="card-img-top" src="assets/img/work/{{project.image}}" alt="Project Image">
                     <div class="card-body">
-                        <h5 class="card-title"><b>{{project.projectName}}</b>
-                            <i *ngIf="project.isWeb" class="fa fa-globe" aria-hidden="true"
-                                style="padding-left:10px;"></i> </h5>
-                        <p class="card-text" style="text-align: justify; font-size: 12px;">{{project.description}}</p>
-                        <button class="btn btn-default" (click)="showProjectCard({
-                                image:project.image,
-                                description: project.largeDescription,
-                                name: project.projectName,
-                                github: project.github|| null})">
-                            See more</button>
+                        <h5 class="card-title"><b>{{project.projectName}}
+                                <i *ngIf="project.isWeb" class="fa fa-globe" aria-hidden="true"
+                                    style="padding-left:10px;"></i></b>
+                        </h5>
+                        <p class="card-text">{{project.description}}</p>
                     </div>
-                </div>
-                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="foward()"><i
-                        class="fa fa-angle-right"></i></button>
+                </a>
             </div>
-        </div>
+        </ngx-slick-carousel>
     </div>
-</div>
+</div>

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;
 }

src/app/components/our-work/our-work.component.ts

@@ -11,51 +11,28 @@ 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) {
     const card = new ProjectCardComponent(this.modalService);
     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": "<div class='btn btn-danger btn-just-icon fa fa-angle-right'></div>",
+    "prevArrow": "<div class='btn btn-danger btn-just-icon fa fa-angle-left'></div>",
+    "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);
-  }
 }

src/app/components/project-card/project-card.component.html

@@ -1,22 +1,30 @@
 <div class="project-modal">
   <div class="modal-header no-border-header">
     <h5 class="modal-title text-center">&nbsp;</h5>
+    <button type="button" class="close" aria-label="Close" (click)="close()">
+      <span aria-hidden="true">&times;</span>
+    </button>
   </div>
   <div class="modal-body">
-    <h5 class="modal-title text-center">{{data.name}}</h5>
     <img src="assets/img/work/{{data.image}}" class="img-rounded" style="height:60%;width:60%;">
+    <h5 class="modal-title text-center">{{data.name}}</h5>
     <div class="project-description">{{data.description}}</div>
     <div class="row justify-content-center social-media-links">
-      <div *ngIf="data.github" class="col-xs-4 social-link">
-        <a rel="tooltip" title="Github" data-placement="bottom" href="{{data.github}}" target="_blank">
-          <i class="fa fa-github-square"></i>
-        </a>
+      <div *ngIf="data.github">
+        <div class="checkProjects">Check Out The Project!</div>
+        <div class="row justify-content-center social-media-links">
+          <div class="col-xs-4 social-link">
+            <a rel="tooltip" title="Github" data-placement="bottom" href="{{data.github}}" target="_blank">
+              <i class="fa fa-github-square"></i>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <div class="modal-footer no-border-footer">
     <div class="project-close mx-auto">
-      <button type="button" #closebutton class="btn btn btn-outline-primary btn-round" data-dismiss="modal" (click)="close()">Close</button>
+      <button type="button" class="btn btn btn-outline-primary btn-round" data-dismiss="modal" (click)="close()">Close</button>
     </div>
   </div>
 </div>

src/app/components/project-card/project-card.component.scss

@@ -36,3 +36,8 @@
   color: #000000;
   font-size: large;
 }
+
+.checkProjects{
+  margin-top: 10px;
+  color: gray;
+}