ChatGPT

**Chris M** · 19 April 2023, 11:09 AM

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>

**Chris M** · 19 April 2023, 11:11 AM

I forgot to add a link to the end result

index (lukemumby.com.au)

**gwpriester** · 19 April 2023, 12:00 PM

Wow!

**xtom** · 19 April 2023, 12:36 PM

I haven't tried ChatGPT myself but it looks amazing what it can do. The only new AI tool I've really tried a bit is Bing image creator which seems kinda nice too but sometimes it can generate funny/disturbing people with extra limbs or contorted facial expressions

Edit: here's a quick example I just did, complete with additional foot

Click image for larger version.

Name: bing-image-ai.jpg
Views: 60
Size: 93.0 KB
ID: 133570

**Acorn** · 19 April 2023, 04:49 PM

Chris, I would have asked for example code for a responsive CSS3 sliding carousel of five or more images with links.
I got

Hmm…let’s try a different topic. Sorry about that. What else is on your mind?

Acorn

**Chris M** · 19 April 2023, 09:10 PM

Originally Posted by Acorn

Chris, I would have asked for example code for a responsive CSS3 sliding carousel of five or more images with links.
I got

Acorn

I asked: How do I create a responsive CSS3 sliding carousel with 5 images and individual links?

ChatGPT came back with:

Code:

<div class="carousel-container">
  <div class="carousel-slides">
    <a href="#"><img src="image1.jpg" alt="Image 1"></a>
    <a href="#"><img src="image2.jpg" alt="Image 2"></a>
    <a href="#"><img src="image3.jpg" alt="Image 3"></a>
    <a href="#"><img src="image4.jpg" alt="Image 4"></a>
    <a href="#"><img src="image5.jpg" alt="Image 5"></a>
  </div>
</div>

Code:

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
}


.carousel-slides {
  display: flex;
  width: 500%;
  animation: slide 10s infinite;
}


.carousel-slides a {
  flex: 1;
  width: 100%;
}


.carousel-slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@keyframes slide {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(0);
  }
}

Code:

const slides = document.querySelector('.carousel-slides');
const slideWidth = slides.clientWidth;
let slideIndex = 0;


function slideNext() {
  slideIndex++;
  if (slideIndex >= 5) {
    slideIndex = 0;
  }
  slides.style.transform = `translateX(-${slideIndex * slideWidth}px)`;
}


setInterval(slideNext, 5000);


const links = document.querySelectorAll('.carousel-slides a');
links.forEach(link => {
  link.addEventListener('click', (event) => {
    event.stopPropagation();
  });
});

Plus a brief explanation of what the code does.
I haven't tested any of the above, and only asked the one question.

**Acorn** · 19 April 2023, 09:19 PM

Thanks Chris, I'll just get my valet to ask in future.

The code looks clean enough.

Acorn

**Chris M** · 19 April 2023, 09:28 PM

Anytime, Acorn

I put more thought into whether to have Rice Bubbles or toast. I went with toast. It also took longer to paste it into TG and wrap it in 'CODE' BB than it did to receive the answer.

Here's the brief description it gave at the end: