fix(carousels): move to picsum.photos

Author: xidedix

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

@@ -13,13 +13,13 @@
         <div class="card-body">
           <carousel [interval]="false">
             <slide>
-              <img src="https://lorempixel.com/900/500/nature/1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1/900/500" alt="First slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://lorempixel.com/900/500/nature/2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1026/900/500" alt="Second slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://lorempixel.com/900/500/nature/3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1031/900/500" alt="Third slide" style="display: block; width: 100%;">
             </slide>
           </carousel>
         </div>
@@ -34,21 +34,21 @@
         <div class="card-body">
           <carousel [interval]="false">
             <slide>
-              <img src="https://lorempixel.com/900/500/technics/1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1032/900/500" 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://lorempixel.com/900/500/technics/2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1036/900/500" 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://lorempixel.com/900/500/technics/3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1043/900/500" 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>
@@ -69,21 +69,21 @@ <h3>Third slide label</h3>
         <div class="card-body">
           <carousel [interval]="false">
             <slide>
-              <img src="https://lorempixel.com/900/500/city/1" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1054/900/500" 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://lorempixel.com/900/500/city/2" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1059/900/500" 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://lorempixel.com/900/500/city/3" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://picsum.photos/id/1065/900/500" 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

@@ -27,9 +27,12 @@ export class CarouselsComponent implements OnDestroy {
   }
 
   addSlide(): void {
-    this.slides.push({
-      image: `https://lorempixel.com/900/500/abstract/${this.slides.length % 8 + 1}/`
-    });
+    setTimeout( () => {
+      const seed = Math.random().toString(36).slice(-6);
+      this.slides.push({
+        image: `https://picsum.photos/seed/${seed}/900/500`
+      });
+    }, 500);
   }
 
   removeSlide(index?: number): void {