bhouse.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. $(".responsive").slick({
  2. dots: true,
  3. slidesToShow: 1,
  4. slidesToScroll: 1,
  5. autoplay: true,
  6. autoplaySpeed: 3000,
  7. arrows: false,
  8. });
  9. // 直式輪播圖動態更改高度
  10. function changeHeight() {
  11. let firstImg = $('.style_house_sec02_slide div:first-child img');
  12. let firstImgHeight = firstImg.css('height');
  13. $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
  14. }
  15. changeHeight();
  16. $(window).resize(function () {
  17. setTimeout(() => {
  18. changeHeight();
  19. }, 500)
  20. });
  21. let imgCount = $(".slide_single_img").length;
  22. let heightImg = [];
  23. $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
  24. let height = $(this).height();
  25. let width = $(this).width();
  26. let x = (height / width);
  27. if (x > 1) {
  28. heightImg.push($(this));
  29. // 預設高度為 0
  30. $(this).css({
  31. 'height': 0 + 'px',
  32. "margin": 'auto',
  33. });
  34. }
  35. });
  36. let heightImgIndex = [];
  37. function getAllIndex(arr) {
  38. // 篩選符合條件 Index
  39. for (i = 0; i < arr.length; i++) {
  40. if (arr[i].height === 0)
  41. heightImgIndex.push(i);
  42. }
  43. return heightImgIndex;
  44. }
  45. let allSlideImg = document.querySelectorAll('.slide_single_img');
  46. getAllIndex(allSlideImg);
  47. // 取得 slick 當前的 Index
  48. $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  49. for (i = 0; i < heightImgIndex.length; i++) {
  50. console.log(heightImgIndex[i]);
  51. if (nextSlide == heightImgIndex[i]) {
  52. allSlideImg[nextSlide].style.height = '500px';
  53. } else {
  54. allSlideImg[heightImgIndex[i]].style.height = '0px';
  55. }
  56. }
  57. });
  58. $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
  59. var height = $(this).height();
  60. var width = $(this).width();
  61. let x = (height / width);
  62. if (x > 1) {
  63. $(this).css({
  64. 'width': 100 + 'px',
  65. "margin": 'auto',
  66. "padding": "0px",
  67. });
  68. } else {
  69. $(this).css({
  70. "margin-top": '30px',
  71. "padding": "5px",
  72. });
  73. }
  74. });
  75. $('.style_house_sec02 .slider-for').slick({
  76. slidesToShow: 1,
  77. slidesToScroll: 1,
  78. arrows: false,
  79. fade: true,
  80. asNavFor: '.slider-nav'
  81. });
  82. $('.style_house_sec02 .slider-nav').slick({
  83. slidesToShow: 5,
  84. slidesToScroll: 3,
  85. asNavFor: '.slider-for',
  86. dots: false,
  87. <<<<<<< Updated upstream
  88. arrows: false,
  89. // centerMode: true,
  90. =======
  91. centerMode: true,
  92. >>>>>>> Stashed changes
  93. focusOnSelect: true
  94. });
  95. $(document).on("click", ".article__readMore", function (event) {
  96. $('.bhouseweb_loc_sec02').css('height', 'auto');
  97. $('.article__readMore').hide();
  98. });
  99. $(document).on("click", ".bhouseweb_loc_type>a", function (event) {
  100. $(this).siblings().removeClass('select');
  101. $(this).toggleClass("select");
  102. });
  103. $(".bt_slogan_portfolio").click(function () {
  104. $(".bt_slogan_portfolio").fadeOut();
  105. });
  106. $(".bt_slogan").click(function () {
  107. $(".bt_slogan_portfolio").fadeIn();
  108. });
  109. // Navbar Icon
  110. function changeIcon(e) {
  111. const item = document.querySelector('[data-toggle-class]');
  112. item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
  113. }
  114. $('.furniture_design_content .slider-for').slick({
  115. slidesToShow: 1,
  116. slidesToScroll: 1,
  117. arrows: false,
  118. fade: true,
  119. asNavFor: '.slider-nav'
  120. });
  121. $('.furniture_design_content .slider-nav').slick({
  122. slidesToShow: 3,
  123. slidesToScroll: 1,
  124. asNavFor: '.slider-for',
  125. focusOnSelect: true
  126. });