Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: ChatGPT

  1. #1
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default ChatGPT

    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>

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default Re: ChatGPT

    I forgot to add a link to the end result
    index (lukemumby.com.au)

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

  4. #4
    Join Date
    Apr 2010
    Location
    Kildare, Ireland
    Posts
    906

    Default Re: ChatGPT

    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:	79 
Size:	93.0 KB 
ID:	133570
    XT-CMS - a self-hosted CMS for Xara Designers - Xara + CMS Demo with blog & ecommerce shopping cart system.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: ChatGPT

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default Re: ChatGPT

    Quote Originally Posted by Acorn View Post
    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.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: ChatGPT

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

    The code looks clean enough.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default Re: ChatGPT

    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:

    Click image for larger version. 

Name:	ChatGPT.jpg 
Views:	55 
Size:	85.9 KB 
ID:	133572

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: ChatGPT

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

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    Nov 2016
    Posts
    6

    Default Re: ChatGPT

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

    [Links removed]
    Last edited by Acorn; 03 May 2023 at 07:25 PM. Reason: Links removed - you also have earned an Infraction!

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •