add slider examples (#5)

Author: denkiwakame

.github/workflows/deploy.yaml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - project-page
+      - main
 permissions:
   contents: read
   pages: write

template.yaml

@@ -85,24 +85,55 @@ body:
       </div>
 
       Refer to [UIKit Video Components Documentation](https://getuikit.com/docs/video) and [Grid system](https://getuikit.com/docs/grid)
-      <div class="uk-child-width-1-2@m" uk-grid>
+      <div class="uk-child-width-1-2 uk-child-width-1-3@m" uk-grid>
         <div>
-          <video
-            src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
-            loop
-            muted
-            uk-video="autoplay:inview"
-            />
+          <img src="001.jpg">
+          <span class="uk-text-meta">Fig1 - caption example</figcaption>
         </div>
         <div>
-          <video
-            src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
-            loop
-            muted
-            uk-video="autoplay:inview"
-            />
+          <img src="002.jpg">
+          <span class="uk-text-meta">Fig2 - caption example</figcaption>
+        </div>
+        <div>
+          <img src="003.jpg">
+          <span class="uk-text-meta">Fig3 - caption example</figcaption>
         </div>
       </div>
+
+      [Slider](https://getuikit.com/docs/slider) component example
+      <div uk-slider>
+        <div class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@m uk-grid">
+          <div>
+            <video
+              src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
+              loop
+              muted
+              uk-video="autoplay:inview"
+              />
+          </div>
+          <div>
+            <video
+              src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
+              loop
+              muted
+              uk-video="autoplay:inview"
+              />
+          </div>
+          <div>
+            <video
+              src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
+              loop
+              muted
+              uk-video="autoplay:inview"
+              />
+          </div>
+        </div>
+        <div class="uk-flex uk-flex-center uk-margin-small">
+          <a class="uk-icon-button" href uk-slidenav-previous uk-slider-item="previous"></a>
+          <a class="uk-icon-button uk-margin-small-left" href uk-slidenav-next uk-slider-item="next"></a>
+        </div>
+      </div>
+
   - title: Markdown examples
     text: |
       Here's our demo text showcasing the power of markdown and KaTeX integration!