Bootstrap 3居中的活动图像

Question

我正在尝试将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;
}

我有布局，但它不能正常工作，因为我希望它能够正常工作。滑块应占据屏幕宽度的100％，而.item wit .active类应始终位于中心（因此，在下一个转换[3]应该代替[2]，依此类推）。其他两个图像应该均匀地占据空间的其余部分（如果有的话）。

任何帮助表示赞赏和欢迎：）

Answer 1

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

http://bootply.com/108301

它使用jQuery将适当的幻灯片移动到active项目中。