记录一个图片幻灯片

演示：

代码如下：

body {
    padding: 20%;
}

.carousel-cell {
    width: 66%;
    aspect-ratio: auto;
    margin-right: 10px;
    border-radius: 12px;
    counter-increment: gallery-cell;
}

.grid-imgs {
    width: 100%;
    padding: 0 56px;

    &>div {
        min-height: 20px;
        overflow: hidden;
        position: relative;
        background-color: rgb(223, 223, 223);
        border-radius: 12px;
        height: 470px;
    }

    img {
        opacity: 1;
        transition: opacity 0.2s ease-in-out 0s;
        object-fit: cover;
        object-position: center center;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0px;
        top: 0px;
    }
}

.grid-carousel {
    display: flex;

    .gc-item {
        flex: 1;
        margin-right: 16px;
        transition: all 1s;
        cursor: pointer;
    }

    .gc-min {
        flex-basis: calc(calc(calc(100% / 12) * 1) - calc(16px * 2));
    }

    .gc-main {
        flex-basis: calc(calc(calc(100% / 12) * 9) - calc(16px * 2));
        cursor: default;
    }

    .gc-item:not(.gc-main):not(.gc-next):not(.gc-min),
    .gc-last {
        margin-right: 0;
    }

    .gc-next {
        flex-basis: calc(calc(calc(100% / 12) * 2) - calc(16px * 2));
    }

    .gc-item:not(.gc-main):not(.gc-next):not(.gc-min) {
        flex: 0 1 0;
        width: 0;
        opacity: 0;
    }

    .gc-height {
        width: 100%;
        padding-top: 59.6%;
        pointer-events: none;
        font-size: 0px;
    }
}

let gcCarousel = function () {
    let mainClass = 'gc-main'
    let minClass = 'gc-min'
    let nextClass = 'gc-next'
    let lastClass = 'gc-last'
    let carouselCells = $('.gc-item')
    $("body").on('click', '.gc-item', function () {
        let index = $(this).data('index');
        let hasClassnext = $(this).hasClass(nextClass)
        let hasClasslast = $(this).hasClass(lastClass)
        let hasClassmin = $(this).hasClass(minClass)
        if (!(hasClassnext || hasClasslast || hasClassmin)) return false
        $('.gc-item').removeClass(mainClass).removeClass(minClass).removeClass(nextClass).removeClass(lastClass)
        $(this).addClass(mainClass)
        if (index == 1) {
            $(this).addClass(mainClass).next().addClass(nextClass).next().addClass(minClass)
        } else if (index == carouselCells.length) {
            $(this).addClass(mainClass).prev().addClass(nextClass).prev().addClass(minClass)
        } else {
            $(this).prev().addClass(minClass)
            $(this).next().addClass(nextClass).next().addClass(lastClass)

        }
    })

}
gcCarousel()