jquery - 如果窗口足够大，如何制作具有固定宽度的旋转木马，附近的幻灯片可见

Question

如果窗口足够大，我想让中心幻灯片的固定宽度为 960px，附近的幻灯片可见

这就是我希望滑块的样子。见网站底部。

我的 HTML

 <div class="col-md-12">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-md-12">
                    <div >
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-12">
                    <div >
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-12">
                    <div>
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

我初始化了它

<script>
    $("#carousel .carousel-indicators li:first").addClass("active");
    $("#carousel .carousel-inner .item:first").addClass("active");

    $('#carousel').carousel({
        interval: 5000
    });
</script>