fix(demo): direct link to specific carousel sample not working (#3272)

The carousel samples in the demo site contain images that are loaded
asynchronously. But as their size is not reserved beforehand, they shift
the remaining content when loaded. As a consequence, the scrolling position
that was set correctly to target a specific sample before the images are
loaded is no longer correct after the images are loaded.

This commit reserves the space for the images by using the trick documented
in the following link to also keep the responsive behavior:
https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576

demo/src/app/components/carousel/demos/basic/carousel-basic.html

@@ -1,20 +1,26 @@
 <ngb-carousel *ngIf="images">
   <ng-template ngbSlide>
-    <img [src]="images[0]" alt="Random first slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[0]" alt="Random first slide">
+    </div>
     <div class="carousel-caption">
       <h3>First slide label</h3>
       <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
     </div>
   </ng-template>
   <ng-template ngbSlide>
-    <img [src]="images[1]" alt="Random second slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[1]" alt="Random second slide">
+    </div>
     <div class="carousel-caption">
       <h3>Second slide label</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
   </ng-template>
   <ng-template ngbSlide>
-    <img [src]="images[2]" alt="Random third slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[2]" alt="Random third slide">
+    </div>
     <div class="carousel-caption">
       <h3>Third slide label</h3>
       <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

demo/src/app/components/carousel/demos/config/carousel-config.html

@@ -1,27 +1,35 @@
 <ngb-carousel *ngIf="images">
   <ng-template ngbSlide>
-    <img [src]="images[0]" alt="Random first slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[0]" alt="Random first slide">
+    </div>
     <div class="carousel-caption">
       <h3>10 seconds between slides...</h3>
       <p>This carousel uses customized default values.</p>
     </div>
   </ng-template>
   <ng-template ngbSlide>
-    <img [src]="images[1]" alt="Random second slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[1]" alt="Random second slide">
+    </div>
     <div class="carousel-caption">
       <h3>No mouse events...</h3>
       <p>This carousel doesn't pause or resume on mouse events</p>
     </div>
   </ng-template>
   <ng-template ngbSlide>
-    <img [src]="images[2]"  alt="Random third slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[2]"  alt="Random third slide">
+    </div>
     <div class="carousel-caption">
       <h3>No keyboard...</h3>
       <p>This carousel uses customized default values.</p>
     </div>
   </ng-template>
   <ng-template ngbSlide>
-    <img [src]="images[3]" alt="Random fourth slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="images[3]" alt="Random fourth slide">
+    </div>
     <div class="carousel-caption">
       <h3>And no wrap after last slide.</h3>
       <p>This carousel uses customized default values.</p>

demo/src/app/components/carousel/demos/navigation/carousel-navigation.html

@@ -1,6 +1,8 @@
 <ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
   <ng-template ngbSlide *ngFor="let image of images">
-    <img [src]="image" alt="Random slide">
+    <div class="picsum-img-wrapper">
+      <img [src]="image" alt="Random slide">
+    </div>
     <div class="carousel-caption">
       <h3>No mouse navigation</h3>
       <p>This carousel hides navigation arrows and indicators.</p>

demo/src/style/demos.css

@@ -41,3 +41,17 @@ ngbd-table-filtering span.ngb-highlight {
 ngbd-table-complete span.ngb-highlight {
   background-color: yellow;
 }
+
+ngb-carousel .picsum-img-wrapper {
+  position: relative;
+  height: 0;
+  padding-top: 55%; /* Keep ratio for 900x500 images */
+}
+
+ngb-carousel .picsum-img-wrapper>img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}