add loading element

layouts/collection/single.html

@@ -8,11 +8,11 @@
     <h2 class="style_house_title style_house_text m-0">{{ .Params.collection_name}}</h2>
 </div>
 <section class="style_house_banner container-fluid px-0">
-    <img src="{{ .Params.image }}" alt="">
+    <img src="{{ .Params.cover_img }}" alt="">
     <div class="collection_banner_text_box">
         <p>{{ .Params.banner_img_text}}</p>
         <p>{{ .Params.homeowner}}｜{{ .Params.room_count}}｜{{ .Params.house_size}}</p>
-      </div>
+    </div>
 </section>
 <div class="style_house_content">
     <div class="style_house_sec01">
@@ -103,7 +103,12 @@
     <hr class="style_house_line">
     <div class="style_house_sec02">
         <!-- <h1 class="style_house_title">內部圖解｜經過精密計算的生活模式</h1> -->
-        <div class="content">
+        <div id="slider-loading" class="d-flex justify-content-center mb-5">
+            <div class="spinner-border text-success" role="status" style="color: rgba(128, 143, 76, 1) !important;">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div class="content" style="opacity: 0;">
             <div class="slider slider-for style_house_sec02_slide">
                 {{ range .Params.collection_slider }}
                 <div>
@@ -222,14 +227,14 @@
         <div class="row px-0 mx-0">
             <div class="col-6 col-sm-6 bg-portfolio ps-0">
                 <a href="/collection/">
-                  <div class="bg-img"></div>
+                    <div class="bg-img"></div>
                 </a>
-              </div>
+            </div>
             <div class="col-6 col-sm-6 bg-qa pe-0">
                 <a href="/frequently_asked_questions/">
-                  <div class="bg-img"></div>
+                    <div class="bg-img"></div>
                 </a>
-              </div>
+            </div>
         </div>
     </div>
 </div>