ChatGPT

[xtom]

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

[Acorn]

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]

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:

<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>

.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);
  }
}

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]

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

The code looks clean enough.

Acorn

[Chris M]

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:

[Acorn]

Cheers. My supplementary would have been , "All this without using JavaScript."

Acorn

[lobbyjp]

Is there any alternative for ChatGPT? As currently it,s not wrking

[Links removed]