带有堆叠单元格的图像滑块

Question

我正在编写一个 Web 应用程序，其设计需要滚动 div 和堆叠图像（见图）

下面是我写的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>

和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;
}

目前我得到的不是溢出，当我增加宽度时图像堆叠内联而不是像上图那样分成两个块

谁能告诉我如何实现第一张图片中的布局。我正在为它的网格使用 Bootstrap 3。

Answer 1

根据我的评论，我的意思是这样的......（不知道正确的 'col-md-xx' 使用）

<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>

带有堆叠单元格的图像滑块

Image slider with stacked cells

html

css

twitter-bootstrap