Twitter bootstrap 引导3中心活动映像

我正试图修改Boostrap 3旋转木马，使其看起来像这样。这就是我目前所做的：

<div class="tcarouselcont">
    <div id="tcarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item" data-b="1">
                <img src="http://placehold.it/1140x500/ff9320&text=1">
            </div>
            <div class="item active" data-b="2">
                <img src="http://placehold.it/1140x500/c6363c&text=2">
            </div>
            <div class="item" data-b="3">
                <img src="http://placehold.it/1140x500/647291&text=3">
            </div>
        </div>
          <a class="left carousel-control" href="#tcarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#tcarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>                
        <ol class="carousel-indicators">
            <li data-target="#tcarousel" data-slide-to="0" class=""></li>
            <li data-target="#tcarousel" data-slide-to="1" class="active"></li>
            <li data-target="#tcarousel" data-slide-to="2" class=""></li>
        </ol>
    </div>
</div>

.tcarouselcont
{
    width: 100%;
    height: 500px;
    overflow: hidden;   
}

#tcarousel > .carousel-inner
{
    width: 999999px;    
}

#tcarousel > .carousel-inner > .item
{
    width: 1140px;
    display: inline-block;
}

#tcarousel > .carousel-inner > .item:nth-child(1)
{
    margin-left: -750px;
}

.tcarouselcont
{
宽度：100%；
高度：500px；
溢出：隐藏；
}
#t转盘>.carousel内部
{
宽度：999999像素；
}
#tcarousel>.carousel-inner>.item
{
宽度：1140px；
显示：内联块；
}
#tcarousel>.carousel-inner>。项目：第n个子项（1）
{
左边距：-750px；
}

我已经有了布局，但它没有按我希望的那样工作。滑块应占据屏幕宽度的100%，并且.item wit.active类应始终位于中间（因此，在下一次转换中[3]应取代[2]，依此类推）。其他两个图像应均匀地占据空间的其余部分（如果有）

---

感谢并欢迎您的任何帮助：）

我认为您必须采用这样的方法

它使用jQuery将适当的幻灯片移动到

活动项中