Partial commit home page slider

src/app/home/home.page.html

@@ -8,15 +8,27 @@
         (click)="selectedTab = 'videos'"> Videos </button>
     </section>
 
-    <ion-slides>
-        <ion-slide>
-          <h1>Slide 1</h1>
-        </ion-slide>
-        <ion-slide>
-          <h1>Slide 2</h1>
-        </ion-slide>
-        <ion-slide>
-          <h1>Slide 3</h1>
+    <ion-slides [options]="slideOpts">
+        <ion-slide *ngFor="let news of newsData">
+
+            <div class="image-holder">
+                <figure>
+                    <img [src]="news.image">
+                </figure>
+            </div>
+
+            <h4> {{ news.heading }} </h4>
+
+            <p>
+                {{ news.description }}
+            </p>
+            
+            <div class="action-buttons">
+                <button>
+                    <ion-icon name="heart-outline"></ion-icon>
+                </button>
+            </div>
+
         </ion-slide>
     </ion-slides>
 

src/app/home/home.page.scss

@@ -44,4 +44,28 @@ ion-content {
             }
         }
     }
+}
+
+ion-slides {
+    margin:  40px 0px;
+
+    ion-slide {
+        display: block;
+        background-color: white;        
+    }
+
+    .image-holder {
+        position: relative;
+
+        figure {
+            margin: 0;
+            display: block;
+            width: 100%;
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
 }

src/app/home/home.page.ts

@@ -8,9 +8,65 @@ import { Component, OnInit } from '@angular/core';
 export class HomePage implements OnInit {
     selectedTab: string = 'news';
 
+    slideOpts = { };
+
+    newsData: Array<{
+        id: string | number,
+        image: string,
+        heading: string,
+        description: string,
+        type: 'VIDEO' | 'ARTICLE',
+        likes: number,
+        isBookmarked: boolean,
+        isLiked: boolean,
+        comments: Array<{
+            user: string,
+            comment: string,
+            likes: number
+        }>,
+    }> = [];
+
     constructor() { }
 
     ngOnInit() {
+
+        this.newsData = [{
+            id: 1,
+            image: 'https://s3.india.com/wp-content/uploads/2020/10/Mayank-Agarwal-celebrates-Kings-XI-Punjabs-win-over-Mumbai-Indians-in-match-37-of-Dream11-IPL-2020-in-Dubai%C2%A9KXIP-Twitter.jpg',
+            heading: 'KXIP beat MI by 3 Wickets',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.',
+            type: 'VIDEO',
+            likes: 10,
+            isLiked: false,
+            isBookmarked: false,
+            comments: [{
+                user: 'kxipFan',
+                comment: 'Yay!',
+                likes: 2,
+            }, {
+                user: 'SehwagFan',
+                comment: 'finally!',
+                likes: 5,
+            }]
+        }, {
+            id: 2,
+            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
+            heading: 'KL Rahul scores fastest 100',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.',
+            type: 'ARTICLE',
+            isLiked: false,
+            isBookmarked: false,
+            likes: 308,
+            comments: []
+        }];
+
+        this.slideOpts = {
+            slidesPerView: 1.3,
+            spaceBetween: 30,
+            slidesOffsetBefore: 30,
+            slidesOffsetAfter: 30,
+        }
+
     }
 
 }