Reputation: 708
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://img2.timeinc.net/people/i/2014/stylewatch/blog/140915/blake-lively-600x450.jpg')" 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.
Upvotes: 0
Views: 63
Reputation: 929
From my comment I meant something like this...(not knowing the correct 'col-md-xx' to use)
<div class="row">
<div class="col-md-12">
<div class="item-image-craousel-left"></div>
<div class="item-image-carousel row">
<div class="col-md-8 main-image" style="background-image: url('http://img2.timeinc.net/people/i/2014/stylewatch/blog/140915/blake-lively-600x450.jpg')"></div>
<div class="col-md-4">
<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>
<div class="item-image-craousel-right"></div>
</div>
</div>
Upvotes: 1