chore(site): vertical carousel sample added

site/views/examples/carousel/vertical.sample.njk

@@ -0,0 +1,47 @@
+---
+title: Vertical Carousel (Single)
+order: 4
+tags: carousel-sample
+---
+
+<div class="esl-carousel-no-extra-space" esl-carousel-container>
+  <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
+    <span class="sr-only">Previous Slide</span>
+  </button>
+
+  <esl-carousel demo-options-target
+                style="aspect-ratio: 16 / 9"
+                esl-carousel-touch="swipe"
+                vertical
+                loop="true">
+    <ul esl-carousel-slides>
+      {% for i in range(0, 4) -%}
+        <li esl-carousel-slide>
+          <div class="card">
+            <div class="img-container img-container-16-9">
+              <esl-image mode="cover" lazy
+                         data-alt="Alt Text Test"
+                         data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+              <div class="h1 text-slide text-white">Slide {{ loop.index }}</div>
+            </div>
+          </div>
+        </li>
+      {%- endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
+    <span class="sr-only">Next Slide</span>
+  </button>
+
+  <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
+
+  <style>
+    .text-slide {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+</div>