twitter-bootstrap 带有居中 div 和多个 div 显示的 Bootstrap Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35142959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel w/ Centered div and multiple divs showing
提问by OMGDrAcula
So in short I need something exactly like "Centered Mode" in this plugin
所以简而言之，我需要这个插件中完全类似于“居中模式”的东西
http://kenwheeler.github.io/slick/
http://kenwheeler.github.io/slick/
I need to do this but using bootstrap. As lead would like to avoid using plugins where possible. Unless it would be simpler to just use a plugin.
我需要这样做，但使用引导程序。领导希望尽可能避免使用插件。除非仅使用插件会更简单。
The lead dev on the project I am on wants to avoid adding plugins where possible. We are using bootstrap 3 and he figured the carousel that comes with bootstrap could just be edited to do what we need. Would it be more time efficient to try and edit the carousel, or build something from scratch(which at point wouldn't it just make sense to use a plugin?)
我所在项目的首席开发人员希望尽可能避免添加插件。我们正在使用 bootstrap 3，他认为可以对 bootstrap 附带的轮播进行编辑以执行我们需要的操作。尝试编辑轮播或从头开始构建某些东西会更省时吗（在这一点上使用插件是否有意义？）
My only idea would be to have a div, with a bunch of inline divs that are translated on click. Would that be the right approach?
我唯一的想法是有一个 div，有一堆在点击时翻译的内联 div。那会是正确的方法吗？
Or is there an easy way to manipulate the built in carousel?
或者有没有一种简单的方法来操纵内置的旋转木马？
Codepen for where I am at so far.
Codepen 了解我目前所处的位置。
http://codepen.io/OMGDrAcula/pen/eJjgwN
http://codepen.io/OMGDrAcula/pen/eJjgwN
h2{
margin: 0;
color: #666;
padding-top: 90px;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: white;
text-align: center;
height: 300px !important;
display: inline-block;
}
.carousel{
margin-top: 20px;
}
.bs-example{
margin: 20px;
}
.carousel.carousel-fade .item {
opacity:0;
filter: alpha(opacity=0); /* ie fix */
}
.carousel.carousel-fade .active.item {
opacity:1;
filter: alpha(opacity=100); /* ie fix */
}<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item col-lg-3 carousel-fade">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item col-lg-3 carousel-fade">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<div class="item col-lg-3 carousel-fade">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html> 回答by Martin McKeaveney
https://jsfiddle.net/L3d67v65/7/
https://jsfiddle.net/L3d67v65/7/
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><a class="thumbnail"> 1 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 2 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 3 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 4 </a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-3"><a class="thumbnail"> 5 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 6 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 7 </a>
</div>
<div class="col-sm-3"><a class="thumbnail"> 8 </a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#slideCarousel" data-slide="prev">?</a>
<a class="right carousel-control" href="#slideCarousel" data-slide="next">?</a>
Had a look. For the short time I spent this quick fiddle should be enough to get you started. I have aligned the carousel elements in bootstrap rows and the arrow buttons will change the row you see. After styling the thumbnails I have started to look like the one in your example, you should make a start on trying to make just one element stand out as active as opposed to a whole row by adding CSS to the active class. I hope this gets you on the right track :)
看过了 在我花这个快速小提琴的短时间内应该足以让你开始。我已经在引导行中对齐了轮播元素，箭头按钮将更改您看到的行。在对缩略图进行样式设置后，我开始看起来像您示例中的缩略图，您应该开始尝试通过向活动类添加 CSS 来使一个元素与整行相比突出显示为活动元素。我希望这能让你走上正轨:)
