AI向け説明 AI Description

`I-008` は基本的な画像スライダーです。`transform: translateX` でトラック全体を移動させ、カレントインデックスに基づいて表示を切り替えます。ナビゲーションドットと前後ボタンで操作します。

`I-008` is a basic image carousel using `transform: translateX` to slide the track. It includes navigation dots and prev/next buttons for control.

調整可能パラメータ Adjustable Parameters

• --transition-duration — スライド遷移の速度Slide transition speed

実装 Implementation

HTML + CSS + JS

<div class="carousel">
  <div class="track">
    <div class="slide"><img src="1.jpg"></div>
    <div class="slide"><img src="2.jpg"></div>
  </div>
  <button class="prev"><</button>
  <button class="next">></button>
</div>

<style>
:root { --transition-duration: 0.5s; }
.carousel { overflow: hidden; position: relative; }
.track { display: flex; transition: transform var(--transition-duration) ease; }
.slide { min-width: 100%; }
</style>

<script>
let idx = 0;
const track = document.querySelector('.track');
const slides = document.querySelectorAll('.slide');
document.querySelector('.next').addEventListener('click', () => {
  idx = (idx + 1) % slides.length;
  track.style.transform = `translateX(-${idx * 100}%)`;
});
</script>

React (JSX + CSS)

// react/I-008.jsx
import { useState } from 'react';
import './I-008.css';

export default function Carousel({ images = [] }) {
  const [current, setCurrent] = useState(0);

  const next = () => setCurrent((prev) => (prev + 1) % images.length);
  const prev = () => setCurrent((prev) => (prev - 1 + images.length) % images.length);

  return (
    <div className="carousel">
      <div className="carousel-track" style={{ transform: `translateX(-${current * 100}%)` }}>
        {images.map((src, i) => (
          <div key={i} className="carousel-slide">
            <img src={src} alt="" />
          </div>
        ))}
      </div>
      <button className="carousel-btn prev" onClick={prev}>❮</button>
      <button className="carousel-btn next" onClick={next}>❯</button>
    </div>
  );
}

/* react/I-008.css */
/* I-008: React styles */
.carousel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

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

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.carousel-btn.prev {
  left: 16px;
}

.carousel-btn.next {
  right: 16px;
}