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.