fix(carousels): images and intervals cleanup

Author: xidedix

src/app/views/base/carousels.component.html

@@ -11,15 +11,15 @@
           </div>
         </div>
         <div class="card-body">
-          <carousel [interval]="3000">
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/1" alt="First slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/2" alt="Second slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/mountains?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/nature/3" alt="Third slide" style="display: block; width: 100%;">
             </slide>
           </carousel>
         </div>
@@ -32,23 +32,23 @@
           <small> optional captions</small>
         </div>
         <div class="card-body">
-          <carousel [interval]="4500">
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/1" alt="First slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>First slide label</h3>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/2" alt="Second slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Second slide label</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/nature?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/technics/3" alt="Third slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Third slide label</h3>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -67,23 +67,23 @@ <h3>Third slide label</h3>
           <small> configuring defaults</small>
         </div>
         <div class="card-body">
-          <carousel>
+          <carousel [interval]="false">
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/1" alt="First slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>First slide label</h3>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/2" alt="Second slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Second slide label</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </slide>
             <slide>
-              <img src="https://loremflickr.com/900/500/city?lock=3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://lorempixel.com/900/500/city/3" alt="Third slide" style="display: block; width: 100%;">
               <div class="carousel-caption d-none d-md-block">
                 <h3>Third slide label</h3>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

src/app/views/base/carousels.component.ts

@@ -1,15 +1,15 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import { CarouselConfig } from 'ngx-bootstrap/carousel';
 
 @Component({
   templateUrl: 'carousels.component.html',
   providers: [
-    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } },
+    { provide: CarouselConfig, useValue: { interval: 1500, noPause: false } },
   ]
 })
-export class CarouselsComponent {
+export class CarouselsComponent implements OnDestroy {
 
-  myInterval: number = 6000;
+  myInterval: number | false = 6000;
   slides: any[] = [];
   activeSlideIndex: number = 0;
   noWrapSlides: boolean = false;
@@ -20,9 +20,15 @@ export class CarouselsComponent {
     }
   }
 
+  ngOnDestroy(): void {
+    this.myInterval = 0;
+    this.noWrapSlides = true;
+    this.myInterval = false;
+  }
+
   addSlide(): void {
     this.slides.push({
-      image: `https://loremflickr.com/900/500/sailing?random=${this.slides.length % 8 + 1}/`
+      image: `https://lorempixel.com/900/500/abstract/${this.slides.length % 8 + 1}/`
     });
   }