slider fixed

content/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung/index.md

@@ -1,5 +1,6 @@
 ---
 title: "推開百葉窗 遇見家的簡單溫馨｜小寶優居・成家故事"
+collection_title: "推開百葉窗 遇見家的簡單溫馨"
 date: 2021-02-23T13:18:25+08:00
 draft: false
 type: "collection"
@@ -8,11 +9,12 @@ image: "/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp"
 description: "新北 吳工程師｜新成屋<br>兩房兩廳｜28 坪<br>總預算 80 萬<br>"
 custom_title_value: "（標準版/釋壓加強版/彈力加強版）"
 size: "31.6坪"
-bed_num: "11111"
+bed_num: "兩房兩廳"
 house_type: "大樓/新成屋"
 designer: "Chinnie"
-space: "客廳 餐廳 <br> 主臥 次臥"
+space: "客廳 餐廳 主臥 次臥-html"
 loc: "台中"
 budget: "111.9萬"
 construction: "昂峰謙若樹"
+# 確定格式就擺fontmatter
 ---

layouts/collection/single.html

@@ -5,7 +5,7 @@
     </div>
   </section>
   <div class="style_house_ads">
-    <h2 class="style_house_title style_house_text">精品飯店微醺好chill宅</h2>
+    <h2 class="style_house_title style_house_text">{{ .Params.collection_title}}</h2>
   </div>
   <section class="style_house_banner container-fluid px-0">
     <img src="/img/1 2.webp" alt="">
@@ -15,15 +15,15 @@
       <div class="style_house_sec01_box">
         <div class="row px-0 mx-0">
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">30坪</h3>
+            <h3 class="fw-bold">{{ .Params.size}}</h3>
             <p>坪數</p>
           </div>
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">三房兩廳</h3>
+            <h3 class="fw-bold">{{ .Params.bed_num}}</h3>
             <p>格局</p>
           </div>
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">大樓/新成屋</h3>
+            <h3 class="fw-bold">{{ .Params.house_type}}</h3>
             <p>屋型</p>
           </div>
         </div>
@@ -31,15 +31,15 @@
       <div class="style_house_sec01_box">
         <div class="row px-0 mx-0">
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">苗栗竹南</h3>
+            <h3 class="fw-bold">{{ .Params.loc}}</h3>
             <p>地區</p>
           </div>
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">遠雄新苑</h3>
+            <h3 class="fw-bold">{{ .Params.construction}}</h3>
             <p>建案名稱</p>
           </div>
           <div class="col-4 col-md-4">
-            <h3 class="fw-bold">Shan</h3>
+            <h3 class="fw-bold">{{ .Params.designer}}</h3>
             <p>設計師</p>
           </div>
         </div>
@@ -49,14 +49,14 @@
           <div class="row px-0 mx-0">
             <div class="col-4 ol-md-6 d-flex align-items-end justify-content-center">
               <div>
-                <h3 class="fw-bold">客廳 餐廳</h3>
-                <h3 class="fw-bold">書房 主臥</h3>
+                <h3 class="fw-bold">{{ .Params.space}}</h3>
+                <!-- <h3 class="fw-bold">書房 主臥</h3> -->
                 <p>設計空間</p>
               </div>
             </div>
             <div class="col-8 col-md-6 d-flex align-items-end justify-content-center px-0">
               <div>
-                <h3 class="fw-bold">76.2萬</h3>
+                <h3 class="fw-bold">{{ .Params.budget}}</h3>
                 <p>總預算(含設計/裝修/裝潢/系統櫃/家具)</p>
               </div>
             </div>
@@ -76,7 +76,7 @@
           </div>
           <div class="col-12 col-md-7 pe-0">
             <div class="sec02_content_text">
-              <h2 class="style_house_subtitle"> {{ .Title }}</h2>
+              <h2 class="style_house_subtitle"> {{ .Params.collection_title}}</h2>
               <p>內文NotoJPMedium14級字行距28pt </p>
               <p>
                 <!-- 都極度熱情，而且紳士般的協助拍攝團隊的黃先生，是個熱情 整個家裡，除了充滿精緻的氛圍，就像每一個家電，都被精心挑

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -6,7 +6,7 @@ $(".responsive").slick({
   autoplaySpeed: 3000,
   arrows: false,
 });
-
+// window.onload = () => {
 // $(".style_house_sec02_slide_list").slick({
 //   dots: false,
 //   slidesToShow: 5,
@@ -17,26 +17,74 @@ $(".responsive").slick({
 //   prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
 //   nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
 // });
-function img_size() {
-  $('.slide_img').each(function () { //jquery.each()循環讀取所有圖片
+// function img_size() {
+//   $('.slide_img').each(function () { //jquery.each()循環讀取所有圖片
+//     var height = $(this).height();
+//     var width = $(this).width();
+//     console.log(height)
+//     if (height > 100) {
+//       $(this).css({
+//         'width': 100 + 'px',
+//         "margin": 'auto',
+//       });
+//     }
+//     else {
+//       $(this).css({
+//         "margin-top": '30px',
+//       });
+//     }
+//   });
+// }
+// img_size();
+// };
+
+window.onload = () => {
+  // 直式輪播圖動態更改高度
+  function changeHeight() {
+    let firstImg = $('.style_house_sec02_slide div:first-child img');
+    let firstImgHeight = firstImg.css('height');
+    $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
+  }
+  changeHeight();
+  $(window).resize(function () {
+    setTimeout(() => {
+      changeHeight();
+    }, 500)
+  });
+  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
     var height = $(this).height();
     var width = $(this).width();
     console.log(height)
-    if (height > 200) {
+    if (height > 500) {
       $(this).css({
         'width': 100 + 'px',
         "margin": 'auto',
+        "padding":"0px",
       });
-    }
-    else {
+    }else {
       $(this).css({
         "margin-top": '30px',
+        // "margin": 'auto',
+        "padding":"5px",
       });
     }
   });
-}
-img_size();
-
+  $('.slider-for').slick({
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    fade: true,
+    asNavFor: '.slider-nav'
+  });
+  $('.slider-nav').slick({
+    slidesToShow: 5,
+    slidesToScroll: 3,
+    asNavFor: '.slider-for',
+    dots: false,
+    // centerMode: true,
+    focusOnSelect: true
+  });
+};
 $(document).on("click", ".article__readMore", function (event) {
   $('.bhouseweb_loc_sec02').css('height', 'auto');
   $('.article__readMore').hide();