From f3ec797d6d123b9186cba917b1b236300f08da5b Mon Sep 17 00:00:00 2001
From: AMAN SINGH <89124765+Aman1919@users.noreply.github.com>
Date: Sat, 15 Feb 2025 10:45:42 +0000
Subject: [PATCH] 2 items in carousel

Signed-off-by: AMAN SINGH <89124765+Aman1919@users.noreply.github.com>
---
 assets/scss/_videos.scss                    | 14 +++++++++-
 layouts/partials/video-section-related.html | 31 +++++++++++++++------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/assets/scss/_videos.scss b/assets/scss/_videos.scss
index 9071407be..3bdbba50d 100644
--- a/assets/scss/_videos.scss
+++ b/assets/scss/_videos.scss
@@ -77,4 +77,16 @@
 .carousel-indicators button.active {
     background-color: #fff;
     opacity: 1;
-}
\ No newline at end of file
+}
+
+
+/* medium and up screens */
+@media (min-width: 768px) {
+  .carousel-inner .carousel-item.active,
+  .carousel-inner .carousel-item-next,
+  .carousel-inner .carousel-item-prev, .carousel-inner {
+    display: flex;
+  }
+
+}
+
diff --git a/layouts/partials/video-section-related.html b/layouts/partials/video-section-related.html
index 51c5a5496..9964a3fd0 100644
--- a/layouts/partials/video-section-related.html
+++ b/layouts/partials/video-section-related.html
@@ -26,7 +26,7 @@
     {{ if gt $matchScore 0 }}
     {{ $matchingVideos = $matchingVideos | append (dict "page" $page "score" $matchScore) }}
     {{ end }}
- 
+
     {{ end }}
 
     {{ $sortedVideos := sort $matchingVideos "score" "desc" }}
@@ -46,9 +46,9 @@ <h2>Related Videos</h2>
 
             <div class="carousel-inner">
                 {{ range $index, $video := $sortedVideos }}
-                <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
-                    <div class="row justify-content-center">
-                        <div class="col-12 col-md-8 col-lg-6">
+                <div class="carousel-item justify-content-around {{ if eq $index 0 }}active{{ end }}">
+                    
+                        <div class="col-12 col-md-7 col-lg-5">
                             <a href="{{ .page.RelPermalink }}" class="video-link text-decoration-none">
                                 <div class="video card h-100 bg-dark text-white border border-secondary shadow-lg p-1">
                                     <div class="video-container position-relative"
@@ -73,7 +73,6 @@ <h4 class="video-title text-white mb-0">{{ .page.Title }}</h4>
                                 </div>
                             </a>
                         </div>
-                    </div>
                 </div>
                 {{ end }}
             </div>
@@ -92,6 +91,22 @@ <h4 class="video-title text-white mb-0">{{ .page.Title }}</h4>
 </div>
 
 
-<style>
-
-</style>
\ No newline at end of file
+<script>
+    
+    if (window.matchMedia("(min-width: 768px)").matches) {
+    let items = document.querySelectorAll('.carousel .carousel-item')
+    items.forEach((el) => {
+        const minPerSlide = 2;
+        let next = el.nextElementSibling;
+        for (var i = 1; i < minPerSlide; i++) {
+            if (!next) {
+                // wrap carousel by using first child
+                next = items[0];
+            }
+            let cloneChild = next.cloneNode(true);
+            el.appendChild(cloneChild.children[0]);
+            next = next.nextElementSibling;
+        }
+    });
+    }
+</script>
\ No newline at end of file