creates testimonials component on homepage

[jakebogan01]

@xuelink I created a nice animated testimonial carousel with six slides that match the website design. It is responsive and tested one different browsers and screen sizes. I used the google reviews that way I can have the user avatar images. Let me know what you think and if you see any issues on your end.

[xuelink]

Awesome, thank you, it deserves new release :D

[xuelink]

Awesome, it deserves new releases for sure ! :D

[jakebogan01]

@xuelink Glad you like it!

[xuelink]

@xuelink Glad you like it!

@jakebogan01 It couldn't have been better.
Any extra feature, if possible, especially in mobile, can you do it by swiping left or right besides of taping the arrow button ?

[jakebogan01]

@xuelink Thanks, I'll see if I can add that

[xuelink]

@xuelink I'll see if I can add that

@jakebogan01 Another extra, if possible,
end of the list and next button can go first item
if back arrow tapped in the first item, it can go last item.

something like that: https://swiperjs.com/demos#infinite-loop

its kinda infinity effect :D

[jakebogan01]

@xuelink Yeah I can try to add that as well. As much as I love Svelte/Sveltekit. Carousels libraries are hard to implement, I struggled with hours of research trying to find a way to get Swiper js into svelte but its just not possible, I played around with other libraries, some worked great but were impossible to make responsive. So I had to make a custom one, I'll try my best to incorporate a infinite loop, and mobile swiping. But no promises haha

[xuelink]

You wrote a slider by yourself aha its awesome @jakebogan01

tried this logic

	const handlePrev = () => {
		active = active - 1 >= 0 ? active - 1 : items.length - 1;
		loadShow();
	}

	const handleNext = () => {
		active = active + 1 < items.length ? active + 1 : 0;
		loadShow();
	}

output:

slider.mp4

[xuelink]

its convervative approach but if you cant find any solution, you can use this one as well while loading :D @jakebogan01

	const loadShow = () => {
		let i;
		items[active].style.transform = `none`;
		items[active].style.zIndex = 1;
		items[active].style.filter = 'none';
		items[active].style.opacity = 1;

		let stt = 0;
		for(i = active + 1; i < items.length; i ++){
			stt++;
			items[i].style.transform = `translateX(${120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(-1deg)`;
			items[i].style.zIndex = -stt;
			items[i].style.filter = 'blur(5px)';
			items[i].style.opacity = stt > 1 ? 0 : 0.6;
		}

		// Add the first item to the end if the active item is the last one
		if (active === items.length - 1) {
			stt++;
			items[0].style.transform = `translateX(${120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(-1deg)`;
			items[0].style.zIndex = -stt;
			items[0].style.filter = 'blur(5px)';
			items[0].style.opacity = stt > 1 ? 0 : 0.6;
		}

		stt = 0;
		for(i = (active - 1); i >= 0; i --){
			stt++;
			items[i].style.transform = `translateX(${-120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(1deg)`;
			items[i].style.zIndex = -stt;
			items[i].style.filter = 'blur(5px)';
			items[i].style.opacity = stt > 1 ? 0 : 0.6;
		}

		// Add the last item to the beginning if the active item is the first one
		if (active === 0) {
			stt++;
			items[items.length - 1].style.transform = `translateX(${-120*stt}px) scale(${1 - 0.2*stt}) perspective(16px) rotateY(1deg)`;
			items[items.length - 1].style.zIndex = -stt;
			items[items.length - 1].style.filter = 'blur(5px)';
			items[items.length - 1].style.opacity = stt > 1 ? 0 : 0.6;
		}
	}
	
	const handlePrev = () => {
		active = active - 1 >= 0 ? active - 1 : items.length - 1;
		loadShow();
	}

	const handleNext = () => {
		active = active + 1 < items.length ? active + 1 : 0;
		loadShow();
	}

preview after loadShow()

[xuelink]

perfect!

[jakebogan01]

@xuelink thanks! I'll review everything, thanks for the updates

[jakebogan01]

@xuelink I have made a PR here. I added the code you provided, thank you! I also added the touch and active dots