Image slider with stacked cells

Vote count:

0

I am writing a web application which has a design that requires an scrolling div with stacked images (see image)

I have written the following HTML

<div class="row">
    <div class="col-md-12"> 
        <div class="item-image-craousel-left"></div>
        <div class="item-image-carousel">
            <div style="background-image: url('http://ift.tt/1rJxZv8')" class="main-image"></div>
            <div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o1_250.jpg')" class="sub-image"></div>
            <div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o2_250.jpg')" class="sub-image"></div>
            <div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o3_250.jpg')" class="sub-image"></div>
            <div style="background-image: url('assets/images/tumblr_ma7gmzwfAq1r780z3o4_250.jpg')" class="sub-image"></div>
            <div style="background-image: url('assets/images/tumblr_ncdgtvSlUc1rjtt9yo2_1280.jpg')" class="sub-image"></div>
        </div>
        <div class="item-image-craousel-right"></div>
    </div>
</div>

And CSS:

.item-image-carousel {
    width: 100%;
    display: inline-block;
    overflow-x: auto; 
}

.item-image-craousel-left {
    height: 399px;
    width: 20px;
    background-color: #40d1b0;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    padding-top: 166px;
    display: none;
}

And currently I am getting this which is not overflowing and when I increase the width the images stack inline rather than in blocks of two as in the image above

Can someone tell me how I can achieve the layout as in the first picture. I am using Bootstrap 3 for its grid.

asked 47 secs ago

Justin Erswell

236

Image slider with stacked cells