Not sure if this should go here or Web Design. It's more about ChatGPT, so I presume here.

I asked ChatGPT to create code for a carousel. I won't add the individual answers, but my further questions should let you know what I thought was missing in the previous answers. I only had to do one single manual tweak...there was a jerk at the end because the right margin was set to 20px. ChatGPT didn't address this, possibly because my numerous attempts to describe what was happening were poor. I manually changed 20px to 0px.

The only other manual adjustments were adding the links and pointing to the images, which ChatGPT told me how to do.

The questions:
Create an HTML carousel with clickable links.
How do I make the carousel scroll in reverse when it reaches the last image?
The pause duration is now double on the first item and last item. How do I edit this?
How do I add a link to the individual images?
The carousel reaches the last image, then skims quickly between the first and last images in a loop.

Each question was answered in seconds, complete with example code.
I was happy with this last example:
Code:
<!DOCTYPE html>
<html>
<head>
	<title>HTML Carousel with Clickable Links</title>
	<style>
		.carousel {
			display: flex;
			overflow-x: scroll;
			scroll-behavior: smooth;
			width: 100%;
			padding: 20px 0;
		}
		
		.carousel-item {
			flex: 0 0 auto;
			margin-right: 0px;
			width: 460px;
			height: 200px;
			background-color: #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48px;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="carousel">
  <a href="https://www.colortools.net/" class="carousel-item"><img src="image1.jpg" alt="Image 1"></a>
  <a href="https://youtube.com/" class="carousel-item"><img src="image2.jpg" alt="Image 2"></a>
  <a href="https://xara.com/" class="carousel-item"><img src="image3.jpg" alt="Image 3"></a>
  <a href="https://https://au.yahoo.com/?p=us" class="carousel-item"><img src="image4.jpg" alt="Image 4"></a>
  <a href="https://www.manypixels.co/gallery/" class="carousel-item"><img src="image5.jpg" alt="Image 5"></a>
  <a href="https://visualpharm.com/" class="carousel-item"><img src="image6.jpg" alt="Image 6"></a>
</div>


	<script>
const carousel = document.querySelector('.carousel');
const carouselItems = document.querySelectorAll('.carousel-item');
const itemWidth = carouselItems[0].offsetWidth + parseInt(getComputedStyle(carouselItems[0]).marginRight);


let currentPosition = 0;
let direction = 1; // set initial direction to forward
let pauseDuration = 2000; // set default pause duration


carousel.scrollTo(currentPosition, 0);


function scrollToNextItem() {
  currentPosition += direction * itemWidth;


  // reverse direction if last item or first item is reached
  if (currentPosition >= (carousel.scrollWidth - carousel.offsetWidth)) {
    currentPosition = carousel.scrollWidth - carousel.offsetWidth;
    direction = -1; // reverse direction to go backward
  } else if (currentPosition <= 0) {
    currentPosition = 0;
    direction = 1; // reverse direction to go forward
  }


  carousel.scrollTo(currentPosition, 0);
}


setInterval(scrollToNextItem, pauseDuration);
</script>
</body>
</html>