fixing issue

Author: ARCHER1511

src/app/all-products/all-products.component.html

@@ -1 +1,2 @@
+<app-slider></app-slider>
 <app-product></app-product>

src/app/all-products/all-products.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { ProductComponent } from '../product/product.component';
+import { SliderComponent } from '../slider/slider.component';
 
 
 @Component({
   selector: 'app-all-products',
-  imports: [ProductComponent],
+  imports: [ProductComponent,SliderComponent],
   templateUrl: './all-products.component.html',
   styleUrl: './all-products.component.scss'
 })

src/app/home/home.component.html

@@ -1,3 +1,3 @@
 <app-feature-product></app-feature-product>
+<app-slider></app-slider>
 <app-category></app-category>
-<app-slider></app-slider>

src/app/slider/slider.component.html

@@ -7,24 +7,3 @@
   <button class="btn btn-primary position-absolute start-0" (click)="prev()">‹</button>
   <button class="btn btn-primary position-absolute end-0" (click)="next()">›</button>
 </div>
-<style>
-    .slider-container {
-  width: 100%;
-  height: 300px;
-  position: relative;
-}
-.slider-track {
-  transition: transform 0.5s ease-in-out;
-}
-.slide {
-  min-width: 100%;
-  height: 100%;
-  flex-shrink: 0;
-}
-
-.slide img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-</style>

src/app/slider/slider.component.scss

@@ -0,0 +1,21 @@
+.slider-container {
+  width: 100%;
+  height: 300px;
+  position: relative;
+}
+
+.slider-track {
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

src/app/slider/slider.component.ts

@@ -1,66 +1,47 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component} from '@angular/core';
 
 @Component({
   selector: 'app-slider',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './slider.component.html',
-  styleUrl: './slider.component.scss'
+  styleUrls: ['./slider.component.scss']
 })
-export class SliderComponent {
-    images: string[] = 
+export class SliderComponent{
+  images: string[] =
     [
       'Assets/slider1.jpg',
       'Assets/slider2.jpg',
       'Assets/slider3.jpg',
     ]
-    currentIndex: number = 0;
-    autoSliderInterval!: number;
-
-    ngOnInit(): void
-    {
-      this.startAutoSlider();
+  currentIndex: number = 0;
+  getTransform(): string {
+    return `translateX(-${this.currentIndex * 100}%)`;
+  }
+  next(): void {
+    if (this.currentIndex < this.images.length - 1) {
+      this.currentIndex++;
     }
-    
-    getTransform(): string
-    {
-      return `translateX(-${this.currentIndex * 100}%)`;
+    else {
+      this.reset();
     }
-    next(): void
-    {
-      if (this.currentIndex < this.images.length - 1){
-        this.currentIndex++;
-      }
-      else
-      {
-        this.reset();
-      }
+  }
+  prev(): void {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
     }
-    prev(): void
-    {
-      if (this.currentIndex > 0){
-        this.currentIndex--;
-      }
-      else
-      {
-        this.reset();
-      }
+    else {
+      this.reset();
     }
-    reset(): void
-    {
-      if (this.currentIndex === 0) {
-        this.currentIndex = this.images.length - 1;
-      }
-      else
-      {
-        this.currentIndex = 0;
-      }
+  }
+  reset(): void {
+    if (this.currentIndex === 0) {
+      this.currentIndex = this.images.length - 1;
     }
-    startAutoSlider(): void
-    {
-      this.autoSliderInterval = window.setInterval(() => {
-        this.next();
-      }, 2000); // Change slide every 2 seconds
+    else {
+      this.currentIndex = 0;
     }
-}
+  }
+}
+