https://drbrucker.com/wp-content/themes/FMbuildr5.0/blocks/block-s…/block-service-slider.js?ver=f34c115e602e

1//import Swiper from 'assets/scripts/swiper-js/swiper-scripts.js';
2  
3var window = jQuery(window);
4jQuery(document).ready(function($) {	
5	initSliders();
6});
7
8var Swiper;
9
10function initSliders() {
11  /* https://swiperjs.com/get-started/ */
12  var fpcarouselinner = jQuery('.theme-service-slider .swiper-service-slider .swiper-wrapper');
13  if (fpcarouselinner.length) {
14	const myServiceSwiper = new Swiper('.theme-service-slider .swiper-service-slider', {
15	  // Optional parameters
16	  direction: 'horizontal',
17	  loop: false,
18	  autoHeight: false,
19	  slidesPerView: 1,
20	  spaceBetween: 10,
21	  grabCursor: true,
22	  mousewheel: false,
23	  keyboard: false,
24
25	  // Navigation arrows
26	  navigation: {
27		nextEl: '.service-next',
28		prevEl: '.service-prev',
29	  },
30	  breakpoints: {
31		768: {
32		  slidesPerView: 2.5,
33		  spaceBetween: 20,
34		},
35		1024: {
36		  slidesPerView: 2.75,
37		  spaceBetween: 20,
38		},
39	  },
40	});
41
42	let isDragging = false;
43	const swiperContainer = jQuery('.theme-service-slider .swiper-service-slider');
44	const helperText = jQuery('<div class="helper-text">Drag</div>').appendTo('body');
45	let dragOffsetX = 0;
46	let dragOffsetY = 0;
47
48	swiperContainer.on("mouseenter", function () {
49	  if (!isDragging) {
50		jQuery("body").css("cursor", "grab");
51		
52		helperText.show();
53	  }
54	});
55
56	swiperContainer.on("mouseleave", function () {
57	  if (!isDragging) {
58		jQuery("body").css("cursor", "default");
59		
60		helperText.hide();
61		helperText.css({ transform:'scale(0)' });
62	  }
63	});
64
65	swiperContainer.on("mousemove", function (event) {
66	  if (!isDragging) {
67		const { pageX, pageY } = event;
68		dragOffsetX = pageX;
69		dragOffsetY = pageY;
70		updateHelperElementsPosition();
71	  }
72	});
73
74	swiperContainer.on("touchstart", function (event) {
75	  if (!isDragging) {
76		const { pageX, pageY } = event.originalEvent.touches[0];
77		dragOffsetX = pageX;
78		dragOffsetY = pageY;
79		updateHelperElementsPosition();
80		
81		helperText.show();
82		
83	  }
84	});
85
86	swiperContainer.on("touchmove", function (event) {
87	  if (!isDragging) {
88		event.preventDefault(); // Prevent page scrolling while dragging
89		const { pageX, pageY } = event.originalEvent.touches[0];
90		dragOffsetX = pageX;
91		dragOffsetY = pageY;
92		
93		updateHelperElementsPosition();
94		
95	  }
96	});
97
98	swiperContainer.on("touchend", function () {
99	  if (!isDragging) {
100		// Helper elements will stay visible after touchend
101	  }
102	});
103
104	myServiceSwiper.on("touchStart", function () {
105	  isDragging = true;
106	  shrinkSlides(this);
107	  jQuery("body").css("cursor", "grabbing");
108	  swiperContainer.addClass("dragging");
109	});
110
111	myServiceSwiper.on("touchMove", function () {
112	  if (isDragging) {
113		const swiperWidth = this.width;
114		const swiperHeight = this.height;
115		const activeSlide = this.slides[this.activeIndex];
116
117		const slideWidth = activeSlide.offsetWidth;
118		const slideHeight = activeSlide.offsetHeight;
119
120		const widthScale = swiperWidth / slideWidth;
121		const heightScale = swiperHeight / slideHeight;
122
123		const minScale = Math.min(widthScale, heightScale);
124
125		originalScale = minScale;
126		shrinkSlides(this);
127	  }
128	});
129
130	myServiceSwiper.on("touchEnd", function () {
131	  isDragging = false;
132	  restoreSlides(this);
133	  jQuery("body").css("cursor", "grab");
134	  swiperContainer.removeClass("dragging");
135	});
136
137	myServiceSwiper.on("slideChangeTransitionEnd", function () {
138	  if (!isDragging) {
139		restoreSlides(this);
140	  }
141	});
142
143	function shrinkSlides(swiper) {
144	  const activeSlide = swiper.slides[swiper.activeIndex];
145	  const otherSlides = Array.from(swiper.slides).filter((slide) => slide !== activeSlide);
146
147	  activeSlide.style.transform = "scale(0.9)";
148	  otherSlides.forEach((slide) => (slide.style.transform = "scale(0.9)"));
149	}
150
151	function restoreSlides(swiper) {
152	  Array.from(swiper.slides).forEach((slide) => (slide.style.transform = ""));
153	}
154
155	function updateHelperElementsPosition() {
156	  const circleSize = 20;
157	  const textPadding = 8;
158	  const positionX = dragOffsetX - circleSize / 2 - 10;
159	  const positionY = dragOffsetY + textPadding - 15;
160	 
161	  helperText.css({ left: positionX, top: positionY + circleSize, transform:'scale(1.25)' });
162	}
163  }
164}
165
166
167
168