react-ui-component/css/carousel.less

some component build with ReactJs

@import url('meta.less');

.carousel {
    overflow: hidden;
    position: relative;
    ._content {
        overflow: auto;
        ._item {
            overflow: hidden;
            display: block;
            float: left;
            height: 100%;
            text-align: center;
            opacity: 0.9;
            &._active {
                opacity: 1;
            }
        }
        &._slide {
            -webkit-transition: transform .5s ease;
            -o-transition: transform .5s ease;
            transition: transform .5s ease;
        }
    }
    
    ._dot {
        text-align: center;
        ._item {
            margin: 10px;
            font-size: 200%;
            color: @gray_b;
            &._active {
                color: @black;
            }
        }
    }
    ._arrow {
        .__arrow {
            cursor: pointer;
            color: @blue;
            position: absolute;
            overflow: hidden;
            top: 50%;
            margin-top: -15px;
            height: 30px;
        }
        ._prev {
            .__arrow;
            left: 10px;
        }
        ._next {
            .__arrow;
            right: 10px;
        }
    }
}