https://makingsense.com/js/modules/testimonials.js

1export const initTestimonialsDrag = () => {
2  const glide = document.querySelector('.testimonials > .glide');
3
4  if (!glide) return;
5
6  // Set event listeners to change cursors
7  const setCursorStyle = (cursorType) => (glide.style.cursor = cursorType);
8
9  glide.addEventListener('mouseenter', () => setCursorStyle('grab'));
10  glide.addEventListener('mouseleave', () => setCursorStyle('default'));
11  glide.addEventListener('mousedown', () => setCursorStyle('grabbing'));
12  glide.addEventListener('mouseup', () => setCursorStyle('grab'));
13
14  // Set glide options for different breakpoints
15  const breakpoints = {
16    414: { peek: 16, gap: 16, perView: 1 },
17    768: { peek: 40, gap: 16, perView: 1 },
18    1024: { peek: 100, gap: 24, perView: 1 },
19    1280: { peek: 260, gap: 30, perView: 1 },
20    1440: { peek: 320, gap: 30, perView: 1 },
21    1600: { peek: 380, gap: 30, perView: 1 },
22    1920: { peek: 500, gap: 30, perView: 1 }, // en este bkp me aparecen 3 en lugar de 1
23    2560: { peek: 700, gap: 30, perView: 1 },
24    3440: { peek: 700, gap: 60, perView: 1 },
25    4000: { peek: 800, gap: 60, perView: 1 },
26  };
27
28  // Init glide
29  const instance = new Glide('.testimonials > .glide', {
30    type: 'carousel',
31    startAt: 0,
32    breakpoints: breakpoints,
33  }).mount();
34
35  // Disable scroll
36  const html = document.querySelector('html');
37
38  instance.on('swipe.move', () => {
39    html.classList.add('stop-scroll');
40  });
41
42  instance.on('swipe.end', () => {
43    html.classList.remove('stop-scroll');
44  });
45};