プラグパーツWEB

・画像スライド

ヘッダーで、複数枚の画像を一定時間で右にスライドして、別の画像に変更するというようなプログラムです。

以下プレビュー、というかそのプログラムで動いているのが以下の画像

HTML

CSS

JavaScript


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像スライド</title>
</head>
<body>
    <div class="slider-container">
        <div class="slides" id="slides">
            <img src="https://picsum.photos/600/400?random=1" class="slide" alt="Slide 1">
            <img src="https://picsum.photos/600/400?random=2" class="slide" alt="Slide 2">
            <img src="https://picsum.photos/600/400?random=3" class="slide" alt="Slide 3">
        </div>
    </div>
</body>
</html>


.slider-container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}

.slides {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s ease-in-out;
}

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


const slides = document.getElementById('slides');
let currentSlide = 0;
const totalSlides = slides.children.length;

function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    slides.style.transform = `translateX(-${currentSlide * 100}%)`;
}

    // 3秒ごとにスライドを切り替え
    setInterval(nextSlide, 3000);