featured article caousel in news page

content/collections/article/2024-03-14.the-bola-5.md

@@ -0,0 +1,14 @@
+---
+id: 942b55c7-23dc-4b0f-8340-b1e9181d36aa
+blueprint: article
+title: 'The Bola 5'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710614479
+duplicated_from: 7844e490-0684-48a7-a655-a7044a4d9e9f
+date_field: '2024-03-13 08:50'
+image: group-6771.jpg
+article_date: '2024-03-17'
+article_featured: true
+---
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?

content/collections/article/2024-03-14.the-bola-6.md

@@ -0,0 +1,14 @@
+---
+id: 65e2a355-c302-4b1b-ab0e-907a766c46a4
+blueprint: article
+title: 'The Bola 6'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710614550
+duplicated_from: 942b55c7-23dc-4b0f-8340-b1e9181d36aa
+date_field: '2024-03-13 08:50'
+image: group-6770.jpg
+article_date: '2024-03-18'
+article_featured: false
+---
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?

public/assets/.meta/group-6770.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 103551
+last_modified: 1710614506
+width: 526
+height: 436
+mime_type: image/jpeg
+duration: null

public/assets/.meta/group-6771.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 131165
+last_modified: 1710614466
+width: 526
+height: 436
+mime_type: image/jpeg
+duration: null

public/css/main.css

@@ -226,6 +226,11 @@ p {
     cursor: pointer;
 }
 
+.article-carousel-ind-container{
+    position: absolute;
+    top:0;
+}
+
 .article-details{
     height: 100%;
     width: 100%;
@@ -353,6 +358,7 @@ p {
 }
 
 @media (min-width: 992px) {
+
     #main-nav .nav-item {
         padding: 0 1.875rem;
     }
@@ -362,6 +368,10 @@ p {
         padding-right: 8.438rem;
     }
 
+    .article-carousel-ind-container{
+        position: relative;
+    }
+
     .booking-container  {
         padding-left: 8.438rem;
         padding-right: 8.438rem;

resources/css/main.css

@@ -221,6 +221,11 @@ p {
     cursor: pointer;
 }
 
+.article-carousel-ind-container{
+    position: absolute;
+    top:0;
+}
+
 .article-details{
     height: 100%;
     width: 100%;
@@ -345,6 +350,7 @@ p {
 }
 
 @media (min-width: 992px) {
+
     #main-nav .nav-item {
         padding: 0 1.875rem;
     }
@@ -354,6 +360,10 @@ p {
         padding-right: 8.438rem;
     }
 
+    .article-carousel-ind-container{
+        position: relative;
+    }
+
     .booking-container  {
         padding-left: 8.438rem;
         padding-right: 8.438rem;

resources/views/article/index.antlers.html

@@ -11,18 +11,14 @@
 
         <div class="text-light section-5 article-container">
 
-            <div id="articleCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
-                <div class="carousel-indicators p-0 m-0">
-                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
-                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
-                </div>
+            <div id="articleCarousel" class="carousel slide carousel-fade position-relative" data-bs-ride="carousel">
+
                 <div class="carousel-inner text-light">
                     {{ firstEntry = true }}
                     {{ collection:article sort="article_date:desc" }}
                         {{ if article_featured }}
                             {{ if firstEntry }}
-                                <div class="carousel-item active" data-bs-interval="1000000">
+                                <div class="carousel-item active" data-bs-interval="2000">
                                     <div class="container-fluid row p-0 mx-auto">
                                         <div data-href="/article/{{ slug }}" class="col-xl-5 article-carousel-item position-relative" style="background-image: url(.{{ image }});">
                                             <div class="position-absolute" style="bottom:10px;left:20px">
@@ -30,7 +26,7 @@
                                                 <hr class="text-db article-details-line" style="height: 5px;"/>
                                             </div>
                                         </div>
-                                        <div class="col-xl-7 px-0 py-5 px-xl-5 py-xl-0">
+                                        <div class="col-xl-7 px-5 py-5 py-xl-0">
                                             <p class="db-h3 text-highlight">{{ title }}</p>
                                             <p>{{ content }}</p>
                                         </div>
@@ -46,7 +42,7 @@
                                             <hr class="text-db article-details-line" style="height: 5px;"/>
                                         </div>
                                     </div>
-                                    <div class="col-xl-7 px-0 py-5 px-xl-5 py-xl-0">
+                                    <div class="col-xl-7 px-5 py-5 py-xl-0">
                                         <p class="db-h3 text-highlight">{{ title }}</p>
                                         <p>{{ content }}</p>
                                     </div>
@@ -56,6 +52,27 @@
                         {{ /if }}
                     {{ /collection:article }}
                 </div>
+                <div class="container-fluid row p-0 mx-auto article-carousel-ind-container">
+                    <div class="col-xl-5 p-0">
+                        <div class="carousel-indicators position-relative p-0 m-0 ms-0 ms-lg-auto" style="width: fit-content;">
+
+                            {{ btnCounter = 0 }}
+                            {{ firstEntry = true }}
+                            {{ collection:article }}
+                                {{ if article_featured }}
+                                    {{ if firstEntry }}
+                                        <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="{{ btnCounter }}" aria-label="Slide {{ btnCounter }}" style="border-radius: 50%;height: 10px;width: 10px;" class="active" aria-current="true"></button>
+                                        {{ firstEntry = false }}
+                                    {{ else }}
+                                        <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="{{ btnCounter }}" aria-label="Slide {{ btnCounter }}" style="border-radius: 50%;height: 10px;width: 10px;"></button>
+                                    {{ /if }}
+                                    {{ btnCounter = btnCounter + 1}}
+                                {{ /if }}
+                            {{ /collection:article }}
+                        </div>
+                    </div>
+                    <div class="col-xl-7 px-0 py-5 px-xl-5 py-xl-0"></div>
+                </div>
             </div>
 
         </div>