fix(carousels): move to loremflickr image placeholders

Author: xidedix

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

@@ -13,13 +13,13 @@
         <div class="card-body">
           <carousel [interval]="3000">
             <slide>
-              <img src="https://lorempixel.com/900/500/technics/2/" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/mountains?lock=1" alt="First slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://lorempixel.com/900/500/technics/4/" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/mountains?lock=2" alt="Second slide" style="display: block; width: 100%;">
             </slide>
             <slide>
-              <img src="https://lorempixel.com/900/500/technics/6/" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/mountains?lock=3" alt="Third slide" style="display: block; width: 100%;">
             </slide>
           </carousel>
         </div>
@@ -34,21 +34,21 @@
         <div class="card-body">
           <carousel [interval]="4500">
             <slide>
-              <img src="https://lorempixel.com/900/500/nature/2/" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/nature?lock=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://lorempixel.com/900/500/nature/4/" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/nature?lock=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://lorempixel.com/900/500/nature/6/" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/nature?lock=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>
@@ -69,21 +69,21 @@ <h3>Third slide label</h3>
         <div class="card-body">
           <carousel>
             <slide>
-              <img src="https://lorempixel.com/900/500/city/2/" alt="First slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/city?lock=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://lorempixel.com/900/500/city/4/" alt="Second slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/city?lock=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://lorempixel.com/900/500/city/6/" alt="Third slide" style="display: block; width: 100%;">
+              <img src="https://loremflickr.com/900/500/city?lock=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

@@ -21,7 +21,7 @@ export class CarouselsComponent {
 
   addSlide(): void {
     this.slides.push({
-      image: `https://lorempixel.com/900/500/sports/${this.slides.length % 8 + 1}/`
+      image: `https://loremflickr.com/900/500/sailing?random=${this.slides.length % 8 + 1}/`
     });
   }