twitter-bootstrap 使用 Bootstrap 3.3.+ 在 HTML/CSS（无插件）中滚动 1 个项目的水平多项目滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41634253/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:31:34 来源:igfitidea点击:
Horizontal Multiple item slider with 1 item scroll in HTML/CSS (No Plugin) with Bootstrap 3.3.+
提问by Mureed Hussain
Check this example http://www.bootply.com/94452
检查这个例子http://www.bootply.com/94452
I need to make similarly horizontal multi item slider without using plugin. i want to make it in html css and js/jquery.
我需要在不使用插件的情况下制作类似的水平多项目滑块。我想在 html css 和 js/jquery 中制作它。
Above slider does not work well when copied it and tried, it slides all item on screen then at the end scrolled only once.
上面的滑块在复制和尝试时效果不佳，它会在屏幕上滑动所有项目，然后最后只滚动一次。
I want to slide item 1 by 1.
我想将项目 1 逐个滑动。
After the last item there should be the first in other words slides should be circularly.
在最后一项之后应该是第一项，换句话说，幻灯片应该是圆形的。
Items containing images and other contents. Here is code i tried.
包含图像和其他内容的项目。这是我试过的代码。
<style>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 4000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
Any one could fix this or any better code. Thanks in advance
任何人都可以修复这个或任何更好的代码。提前致谢
采纳答案by Mureed Hussain
Finally found what i was looking for.Here is the example working with bootstrap 3.3.x
终于找到了我要找的东西。这是使用 bootstrap 3.3.x 的示例
http://codepen.io/MhSami/pen/zNBMbj
http://codepen.io/MhSami/pen/zNBMbj
here is source :
这是来源：
<style>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,900,700);
html {
font-size: 16px;
}
h3 {
font-family: 'Lato', sans-serif;
font-size: 2.125rem;
font-weight: 700;
color: #444;
letter-spacing: 1px;
text-transform: uppercase;
margin: 55px 0 35px;
}
a {
color: #ddd;
text-transform: capitalize;
font-size: 20px;
&:hover {
color: #ccc;
text-decoration:none;
}
}
.carousel-inner { margin: auto; width: 90%; }
.carousel-control { width: 4%; }
.carousel-control.left,
.carousel-control.right {
background-image:none;
}
.glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
margin-top:-10px;
margin-left: -10px;
color: #444;
}
.carousel-inner {
a {
display:table-cell;
height: 180px;
width: 200px;
vertical-align: middle;
}
img {
max-height: 150px;
margin: auto auto;
max-width: 100%;
}
}
@media (max-width: 767px) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@media (min-width: 767px) and (max-width: 992px ) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
@media (min-width: 992px ) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(16.7%, 0, 0);
transform: translate3d(16.7%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-16.7%, 0, 0);
transform: translate3d(-16.7%, 0, 0);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-12 text-center"><h3>Multiple Item Product Carousel Bootstrap 3.3.6<br><a href="#">Thanks to and Refrence @Maurice and Icons8</a></h3></div>
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/pineapple-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/paprika-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/avocado-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/banana-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/onion-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/asparagus-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Plants/watermelon-96.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="https://maxcdn.icons8.com/Color/PNG/96/Food/eggplant-96.png" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<script>
$(document).ready(function() {
$('.carousel[data-type="multi"] .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
Thanks @Ruby for highlighting the problem.
感谢@Ruby 强调了这个问题。
回答by Ruby
If you use Bootstrap css version 3.2.0, it will work. Its not working for the newer versions.
如果您使用 Bootstrap css 版本 3.2.0，它将起作用。它不适用于较新的版本。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
