Wandbox

Ran/Viewed Log

bbs_quest_list.php

Author
anonymous
10 months ago
Language

PHP
Compiler

php 8.3.3
Options

bbs_quest_list.php

Author
anonymous
10 months ago
style.css
$ php prog.php
<!-- スライドの外枠 -->
<div class="carousel-area">
    <!-- スライド（コンテンツ） -->
    <div id="carousel" class="carousel">
        <div class="carousel-container">
            <div class="carousel-video-area" style="display: inline-block;">
                <a href="">
                    <div class="carousel-video-wrap">
                        <video class="carousel-video-streaming" src="" type="video/mp4" autoplay muted loop></video>
                    </div>
                    <div class="carousel-video-title">どうがあっぷろーど</div>
                </a>
            </div>
        </div>
        <div class="carousel-container">
            <div class="carousel-video-area" style="display: inline-block;">
                <a href="">
                    <div class="carousel-video-wrap">
                        <video class="carousel-video-streaming" src="" type="video/mp4" autoplay muted loop></video>
                    </div>
                    <div class="carousel-video-title">どうがあっぷろーど</div>
                </a>
            </div>
        </div>
        <div class="carousel-container">
            <div class="carousel-video-area" style="display: inline-block;">
                <a href="">
                    <div class="carousel-video-wrap">
                        <video class="carousel-video-streaming" src="" type="video/mp4" autoplay muted loop></video>
                    </div>
                    <div class="carousel-video-title">どうがあっぷろーど</div>
                </a>
            </div>
        </div>
        <!-- ↓追加 -->
        <div class="carousel-container">
            <div class="carousel-video-area" style="display: inline-block;">
                <a href="">
                    <div class="carousel-video-wrap">
                        <video class="carousel-video-streaming" src="" type="video/mp4" autoplay muted loop></video>
                    </div>
                    <div class="carousel-video-title">どうがあっぷろーど</div>
                </a>
            </div>
        </div>
        <div class="carousel-container">
            <div class="carousel-video-area" style="display: inline-block;">
                <a href="">
                    <div class="carousel-video-wrap">
                        <video class="carousel-video-streaming" src="" type="video/mp4" autoplay muted loop></video>
                    </div>
                    <div class="carousel-video-title">どうがあっぷろーど</div>
                </a>
            </div>
        </div>
        <!-- ↑追加 -->
    </div>
    <!-- 左右のボタン -->
    <span id="prev" class="prev"></span>
    <span id="next" class="next"></span>
    <!-- インジケーター -->
    <ul class="indicator" id="indicator">
        <li class="list"></li>
        <li class="list"></li>
        <li class="list"></li>
        <li class="list"></li> <!-- ←追加 -->
        <li class="list"></li> <!-- ←追加 -->
    </ul>
</div>
<script>
    const slide = document.getElementById('carousel');
    const prev = document.getElementById('prev');
    const next = document.getElementById('next');
    const indicator = document.getElementById('indicator');
    const lists = document.querySelectorAll('.list');
    const totalSlides = lists.length;
    let currentSlide = 0;
    let autoPlayInterval;

    function updateIndicator() {
        lists.forEach((list, index) => {
            list.classList.toggle('active', index === currentSlide);
        });
    }

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

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        slide.style.transform = `translateX(-${currentSlide * 20}%)`;
        updateIndicator();
    }

    function startAutoPlay() {
        autoPlayInterval = setInterval(nextSlide, 3000);
    }

    function resetAutoPlayInterval() {
        clearInterval(autoPlayInterval);
        startAutoPlay();
    }
    next.addEventListener('click', () => {
        nextSlide();
        resetAutoPlayInterval();
    });
    prev.addEventListener('click', () => {
        prevSlide();
        resetAutoPlayInterval();
    });
    indicator.addEventListener('click', (event) => {
        if (event.target.classList.contains('list')) {
            const index = Array.from(lists).indexOf(event.target);
            currentSlide = index;
            slide.style.transform = `translateX(-${currentSlide * 20}%)`;
            updateIndicator();
            resetAutoPlayInterval();
        }
    });
    startAutoPlay();
<script>
Exit Code:
0