https://www.samaterials.es/js/featured-products.js?v=1789002534

1const wrapper = document.querySelector('.cards-wrapper')
2const productItem = document.querySelector('.product-card-item')
3const scrollStep = parseInt(productItem.getBoundingClientRect().width)
4
5// 获取左右按钮元素并绑定点击事件
6const buttonLeft = document.querySelector('.button-prev')
7
8buttonLeft.addEventListener('click', function () {
9  scrollLeft()
10})
11
12const buttonRight = document.querySelector('.button-next')
13
14buttonRight.addEventListener('click', function () {
15  scrollRight()
16})
17
18function debounce(func, wait) {
19  let timeout
20  return function (...args) {
21    clearTimeout(timeout)
22    timeout = setTimeout(() => func.apply(this, args), wait)
23  }
24}
25
26function getRightPaddingRem() {
27  const width = window.innerWidth
28
29  if (width <= 1025) {
30    return 0.3
31  } else if (width <= 1399) {
32    return 1.2
33  } else {
34    return 2.1
35  }
36}
37function getRemInPx() {
38  return parseFloat(getComputedStyle(document.documentElement).fontSize)
39}
40
41function remToPx(rem) {
42  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
43  return rem * rootFontSize
44}
45
46function updatePaddingRight() {
47  const rem = getRightPaddingRem()
48  const px = parseInt(remToPx(rem))
49  return px
50}
51
52window.addEventListener('resize', debounce(updatePaddingRight, 300))
53updatePaddingRight()
54
55const screenWidth = window.innerWidth
56
57// 滑动到左边的逻辑
58function scrollLeft() {
59  const currentScrollLeft = wrapper.scrollLeft
60  if (currentScrollLeft > 0) {
61    wrapper.scrollTo({
62      top: 0,
63      left: currentScrollLeft - scrollStep - updatePaddingRight(),
64      behavior: 'smooth',
65    })
66  }
67}
68
69// 滑动到右边的逻辑
70function scrollRight() {
71  const currentScrollLeft = wrapper.scrollLeft
72  const maxScrollLeft = wrapper.scrollWidth - wrapper.clientWidth
73  if (currentScrollLeft < maxScrollLeft) {
74    wrapper.scrollTo({
75      top: 0,
76      left: currentScrollLeft + scrollStep + updatePaddingRight(),
77      behavior: 'smooth',
78    })
79  }
80}
81
82// 监听滚动事件
83wrapper.addEventListener('scroll', function () {
84  const maxScrollLeft = wrapper.scrollWidth - wrapper.clientWidth
85  const currentScrollLeft = wrapper.scrollLeft
86  console.log(currentScrollLeft, 'currentScrollLeft')
87
88  if (currentScrollLeft >= maxScrollLeft - 10) {
89    buttonRight.disabled = true
90    buttonRight.classList.remove('slide-button-active')
91    // wrapper.style.paddingRight = '2.1rem'
92    $('.oc-main-sam-featured-products .cards-wrapper').css(
93      'padding-right',
94      updatePaddingRight() + 'px',
95    )
96  } else {
97    buttonRight.disabled = false
98    buttonRight.classList.add('slide-button-active')
99    // wrapper.style.paddingRight = '0'
100    $('.oc-main-sam-featured-products .cards-wrapper').css(
101      'padding-right',
102      updatePaddingRight() + 'px',
103    )
104  }
105
106  if (currentScrollLeft <= 10) {
107    buttonLeft.disabled = true
108    buttonLeft.classList.remove('slide-button-active')
109  } else {
110    buttonLeft.disabled = false
111    buttonLeft.classList.add('slide-button-active')
112  }
113})