js3-7

by wang_siang

HTML

<div class="carousel">
        <div class="carousel-inner">
        </div>
        <div class="carousel-control carousel-control-prev">&#10094;</div>
        <div class="carousel-control carousel-control-next">&#10095;</div>
        <div class="carousel-dots"></div>

    </div>

CSS

*,
        ::before,
        ::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .carousel:hover {
            cursor: pointer;
        }

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

        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            max-height: 600px;
        }

        .carousel-item img {
            width: 100%;
            object-fit: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #ffffffa3;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(20px);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
        }

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

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

        .carousel-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .dot {
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            cursor: pointer;
        }

        .carousel-dots .active {
            background: #333;
        }

JavaScript

let imgLink = [
            `https://images.unsplash.com/photo-1738066246945-81af71b60493?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1739312025707-bbf6765973b3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1739047855450-27615bc98bc5?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1504446659705-07c22b96c3fd?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1740121565887-efe5b47fe9fb?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
        ];

        let items = [];
        const carousel = document.querySelector('.carousel')
        const carouselInner = document.querySelector('.carousel-inner');
        const carouselDots = document.querySelector('.carousel-dots');
        const prevBtn = document.querySelector('.carousel-control-prev');
        const nextBtn = document.querySelector('.carousel-control-next');

        for (let i = 0; i < 5; i++) {
            items.push(`<div class="carousel-item"><img src="${imgLink[i]}" alt=""></div>`)
        }

        carouselInner.innerHTML =
            items[items.length - 1] +
            items.join('') +
            items[0];

        for (let i = 0; i < items.length; i++) {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            dot.dataset.index = i;
            carouselDots.append(dot);
        };

        let index = 1;
        let totalItems = document.querySelectorAll('.carousel-item').length;
        let dots = document.querySelectorAll('.dot');
        let isTransitioning =...