bhouse.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. $(".responsive").slick({
  2. dots: true,
  3. slidesToShow: 1,
  4. slidesToScroll: 1,
  5. autoplay: true,
  6. autoplaySpeed: 3000,
  7. arrows: false,
  8. });
  9. // window.onload = () => {
  10. // $(".style_house_sec02_slide_list").slick({
  11. // dots: false,
  12. // slidesToShow: 5,
  13. // slidesToScroll: 3,
  14. // infinite: true,
  15. // // centerMode: true,
  16. // arrows: false,
  17. // prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  18. // nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
  19. // });
  20. // function img_size() {
  21. // $('.slide_img').each(function () { //jquery.each()循環讀取所有圖片
  22. // var height = $(this).height();
  23. // var width = $(this).width();
  24. // console.log(height)
  25. // if (height > 100) {
  26. // $(this).css({
  27. // 'width': 100 + 'px',
  28. // "margin": 'auto',
  29. // });
  30. // }
  31. // else {
  32. // $(this).css({
  33. // "margin-top": '30px',
  34. // });
  35. // }
  36. // });
  37. // }
  38. // img_size();
  39. // };
  40. // window.onload = () => {
  41. // 直式輪播圖動態更改高度
  42. function changeHeight() {
  43. let firstImg = $('.style_house_sec02_slide div:first-child img');
  44. let firstImgHeight = firstImg.css('height');
  45. $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
  46. }
  47. changeHeight();
  48. $(window).resize(function () {
  49. setTimeout(() => {
  50. changeHeight();
  51. }, 500)
  52. });
  53. $('.slide_single_img').each(function () { // jquery.each() 循環讀取所有圖片
  54. var height = $(this).height();
  55. var width = $(this).width();
  56. console.log(height)
  57. console.log(width)
  58. let x=(height/width)
  59. console.log(x)
  60. if (x > 1) {
  61. $(this).css({
  62. 'height': 500 + 'px',
  63. "margin": 'auto',
  64. });
  65. }else {
  66. }
  67. });
  68. $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
  69. var height = $(this).height();
  70. var width = $(this).width();
  71. console.log(height)
  72. console.log(width)
  73. let x=(height/width)
  74. console.log(x)
  75. if (x > 1) {
  76. $(this).css({
  77. 'width': 100 + 'px',
  78. "margin": 'auto',
  79. "padding":"0px",
  80. });
  81. }else {
  82. $(this).css({
  83. "margin-top": '30px',
  84. // "margin": 'auto',
  85. "padding":"5px",
  86. });
  87. }
  88. });
  89. $('.slider-for').slick({
  90. slidesToShow: 1,
  91. slidesToScroll: 1,
  92. arrows: false,
  93. fade: true,
  94. asNavFor: '.slider-nav'
  95. });
  96. $('.slider-nav').slick({
  97. slidesToShow: 5,
  98. slidesToScroll: 3,
  99. asNavFor: '.slider-for',
  100. dots: false,
  101. // centerMode: true,
  102. focusOnSelect: true
  103. });
  104. // };
  105. $(document).on("click", ".article__readMore", function (event) {
  106. $('.bhouseweb_loc_sec02').css('height', 'auto');
  107. $('.article__readMore').hide();
  108. });
  109. $(document).on("click", ".bhouseweb_loc_type>a", function (event) {
  110. $(this).siblings().removeClass('select');
  111. $(this).toggleClass("select");
  112. });
  113. $(".bt_slogan_portfolio").click(function () {
  114. $(".bt_slogan_portfolio").fadeOut();
  115. });
  116. $(".bt_slogan").click(function () {
  117. $(".bt_slogan_portfolio").fadeIn();
  118. });
  119. // Navbar Icon
  120. function changeIcon(e) {
  121. const item = document.querySelector('[data-toggle-class]');
  122. item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
  123. }
  124. window.onload = () => {
  125. $('.furniture_design_content .slider-for').slick({
  126. slidesToShow: 1,
  127. slidesToScroll: 1,
  128. arrows: false,
  129. fade: true,
  130. asNavFor: '.slider-nav'
  131. });
  132. $('.furniture_design_content .slider-nav').slick({
  133. slidesToShow: 3,
  134. slidesToScroll: 1,
  135. asNavFor: '.slider-for',
  136. focusOnSelect: true
  137. });
  138. };