ChatGPT4にカルーセルスライダーをドン引きするほどいい感じに実装してもらう

ChatGPT4が公開されて巷で阿鼻叫喚というか歓声というか、盛り上がっていますね。私もその一人です。というわけでChatGPT4でどこまでコーディングが可能なのかということでカルーセルスライダーを実装してもらってみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WCAG 2.1 AA カルーセルスライダー</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="carousel">
    <div class="carousel-container">
      <img src="image1.jpg" alt="画像1の説明" class="carousel-slide" style="width:1280px;height:720px;">
      <img src="image2.jpg" alt="画像2の説明" class="carousel-slide" style="width:1280px;height:720px;">
      <!-- 他のスライドを追加 -->
    </div>
    <button class="carousel-button carousel-button-prev" aria-label="前のスライド">前</button>
    <button class="carousel-button carousel-button-next" aria-label="次のスライド">次</button>
  </section>
  <script src="scripts.js"></script>
</body>
</html>

/* styles.css */

.carousel {
  position: relative;
  overflow: hidden;
  width: 1280px;
  height: 720px;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  flex-shrink: 0;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
}

.carousel-button-prev {
  left: 10px;
}

.carousel-button-next {
  right: 10px;
}

// scripts.js

const carouselContainer = document.querySelector('.carousel-container');
const carouselSlides = Array.from(document.querySelectorAll('.carousel-slide'));
const prevButton = document.querySelector('.carousel-button-prev');
const nextButton = document.querySelector('.carousel-button-next');
let currentIndex = 0;
let carouselInterval;

function goToSlide(index) {
  currentIndex = index;
  carouselContainer.style.transform = `translateX(-${1280 * currentIndex}px)`;
}

function goToPrevSlide() {
  if (currentIndex === 0) {
    goToSlide(carouselSlides.length - 1);
  } else {
    goToSlide(currentIndex - 1);
  }
}

function goToNextSlide() {
  if (currentIndex === carouselSlides.length - 1) {
    goToSlide(0);
  } else {
    goToSlide(currentIndex + 1);
  }
}

function startCarouselInterval() {
  carouselInterval = setInterval(goToNextSlide, 5000);
}

function stopCarouselInterval() {
  clearInterval(carouselInterval);
}

prevButton.addEventListener('click', () => {
  stopCarouselInterval();
  goToPrevSlide();
  startCarouselInterval();
});

nextButton.addEventListener('click', () => {
  stopCarouselInterval();
  goToNextSlide();
  startCarouselInterval();
});

carouselContainer.addEventListener('mouseenter', stopCarouselInterval);
carouselContainer.addEventListener('mouseleave', startCarouselInterval);

startCarouselInterval();

このJavaScriptコードでは、カルーセルスライダーのスライドを切り替える機能と、自動でスライドが切り替わる機能を実装しています。また、マウスがカルーセル上にあるときは自動切り替えを一時停止し、マウスが離れると再開するようになっています。これにより、WCAG 2.1 レベルAAの要件に対応しています。

若干の調整は必要としながらも十分普通のカルーセルスライダーとして使えるものが一発で出てきます。試行錯誤をすることで色々な機能を用いたカルーセルスライダーなんかも実装できるのではないかなと考えられます。

ついでにJavaScriptの難読化も依頼しておきました。

!function(){const t=document.querySelector(".carousel-container"),e=Array.from(document.querySelectorAll(".carousel-slide")),n=document.querySelector(".carousel-button-prev"),c=document.querySelector(".carousel-button-next");let a=0,r;function l(e){a=e,t.style.transform=`translateX(-${100*a}%)`}function o(){0===a?l(e.length-1):l(a-1)}function s(){a===e.length-1?l(0):l(a+1)}function u(){r=setInterval(s,5e3)}function i(){clearInterval(r)}n.addEventListener("click",(()=>{i(),o(),u()})),c.addEventListener("click",(()=>{i(),s(),u()})),t.addEventListener("mouseenter",i),t.addEventListener("mouseleave",u),u()}();