From 22b819452eab985b3a01d7a72d2a3b3b8931eddb Mon Sep 17 00:00:00 2001
From: YeSeul Cho <86948867+seul1230@users.noreply.github.com>
Date: Fri, 14 Jun 2024 03:24:57 +0900
Subject: [PATCH] Update carousel.html

[Fixed carousel problem]
Now you can add 2 or more carousels in a page.
---
 _includes/elements/carousel.html | 112 ++++++++++++++++++++++++-------
 1 file changed, 87 insertions(+), 25 deletions(-)

diff --git a/_includes/elements/carousel.html b/_includes/elements/carousel.html
index d0c811498..d9bc612f8 100644
--- a/_includes/elements/carousel.html
+++ b/_includes/elements/carousel.html
@@ -1,40 +1,102 @@
-{%- assign images = carousel_images | strip | newline_to_br | split: '<br />' -%}
-
-<div id="carouselExampleIndicators" class="carousel slide" data-ride="false">
-
+{%- assign images = carousel_images | strip | newline_to_br | split: '<br />' -%} 
+{%- assign carousel_id = include.carousel_id -%}
+{%- if include.class -%}
+<div id="carouselExampleIndicators{{ carousel_id }}" class="carousel slide" data-ride="false">
   <ol class="carousel-indicators">
-    {% for image in images %}
-        {%- if forloop.first -%}
-          <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.index0}}" class="active"></li>
-        {%- else -%}
-          <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.index0}}"></li>
-        {%- endif -%}
-    {% endfor %}
+    {% for image in images %} {%- if forloop.first -%}
+    <li
+      data-target="#carouselExampleIndicators{{ carousel_id }}"
+      data-slide-to="{{forloop.index0}}"
+      class="active"
+    ></li>
+    {%- else -%}
+    <li data-target="#carouselExampleIndicators{{ carousel_id }}" data-slide-to="{{forloop.index0}}"></li>
+    {%- endif -%} {% endfor %}
   </ol>
 
   <div class="carousel-inner">
-    {% for image in images %}
-      {%- if forloop.first -%}
-        <div class="carousel-item active">
-          <img src="{{ image }}" class="d-block w-100">
-        </div>
-      {%- else -%}
-        <div class="carousel-item">
-          <img src="{{ image }}" class="d-block w-100">
-        </div>
-      {%- endif -%}
-    {% endfor %}
+    {% for image in images %} {%- if forloop.first -%}
+    <div class="carousel-item active" width="90%">
+      <img src="{{ image }}" class="{{include.class}}" width="90%"/>
+    </div>
+    {%- else -%}
+    <div class="carousel-item" width="90%">
+      <img src="{{ image }}" class="{{include.class}}" width="90%"/>
+    </div>
+    {%- endif -%} {% endfor %}
   </div>
 
-  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+  <a
+    class="carousel-control-prev"
+    href="#carouselExampleIndicators{{ carousel_id }}"
+    role="button"
+    data-slide="prev"
+  >
+  
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
 
-  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+  <a
+    class="carousel-control-next"
+    href="#carouselExampleIndicators{{ carousel_id }}"
+    role="button"
+    data-slide="next"
+  >
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
-
 </div>
 
+{%- else -%}
+<div id="carouselExampleIndicators{{ carousel_id }}" class="carousel slide" data-ride="false">
+  <ol class="carousel-indicators" width="90%">
+    {% for image in images %} {%- if forloop.first -%}
+    <li
+      data-target="#carouselExampleIndicators{{ carousel_id }}"
+      data-slide-to="{{forloop.index0}}"
+      class="active"
+    ></li>
+    {%- else -%}
+    <li data-target="#carouselExampleIndicators{{ carousel_id }}" data-slide-to="{{forloop.index0}}"></li>
+    {%- endif -%} {% endfor %}
+  </ol>
+
+  <div class="carousel-inner" width="90%">
+    {% for image in images %} {%- if forloop.first -%}
+    <div class="carousel-item active" width="90%">
+      <img src="{{ image }}" class="d-block w-90" width="90%" width="90%"/>
+    </div>
+    {%- else -%}
+    <div class="carousel-item" width="90%">
+      <img src="{{ image }}" class="d-block w-90" width="90%" width="90%"/>
+    </div>
+    {%- endif -%} {% endfor %}
+  </div>
+
+  <a
+    class="carousel-control-prev"
+    href="#carouselExampleIndicators{{ carousel_id }}"
+    role="button"
+    data-slide="prev"
+  >
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+
+  <a
+    class="carousel-control-next"
+    href="#carouselExampleIndicators{{ carousel_id }}"
+    role="button"
+    data-slide="next"
+  >
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+{%- endif -%}
+<style>
+  .height-350 {
+    height: 350px !important;
+  }
+</style>