w-ui/packages/carousel/src/carousel.less

A Vue.js 2.0 UI Toolkit for mobile

.carousel {
    box-sizing: content-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    .carousel-track {
        height: 100%;
        min-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        display: table-cell;
        font-size: 0;
    }
    .carousel-item {
        width: 100vw;
        height: 100%;
        overflow: hidden;
        display: inline-block;
    }
    .carousel-indicators {
        position: absolute;
        height: 0;
        bottom: 40px;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .carousel-dot {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 10px;
        background: rgba(0, 0, 0, 0.5);
        &.active {
            background: red;
        }
    }
}