Inline Edit

by someprimetime

HTML

<div class="carousel">
            <div class="controls prev">
            <<</div>
    <div class="carousel-container">
                <ul class="carousel-inner">
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=1">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=2">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=3">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=4">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=5">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=6">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=7">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=8">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=9">
                    </li>
                    <li>
                        <img src="http://placehold.it/100x100&amp;text=10">
                    </li>
                </ul>
                </div>
                        
                <div class="controls next">
                    <<</div>
        </div>

SCSS

.carousel {
width: 800px;
}
.carousel-container {
    width: 600px;
    overflow: hidden;
    
    .carousel-inner {
        width: 99999px;
        li {
            display: inline-block;
        }
    }
}

.controls {
    width: 50px;
    
    &.prev {
    float: left;
    }
    &.next {
        float: right;
    }
}