我有一个 slider ，它是我从另一篇有非常相似问题的帖子中摘下来的。 slider 的目的是在屏幕上同时显示多个元素，而不是一个。然后它们会一个接一个地移出屏幕，被另一个替换。
示例
1 - 2 - 3 - 4 - 5 - 6 >>> 2 - 3 - 4 - 5 - 6 - 7 >>> 3 - 4 - 5 - 6 - 7 - 8
目前， slider 一次移动整行，而不是只向右/向左滑动一个。任何帮助将不胜感激。
谢谢
html:
<!DOCTYPE html>
<html>
<head>
<title> Spotlight Productions </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" type="image/png" href="img/favicon2.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,800,700,600,200' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href = "css/styles.css" rel = "stylesheet">
</head>
<body style = "background-color: green">
<div class="col-sm-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-sm-2"><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>
</body>
</html>
CSS
/** Client Slider **/
.carousel-inner .active.left { left: -16%; }
.carousel-inner .next { left: 16%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
Javascript
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
})
$('.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<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
最佳答案
您以正确的方式开始了 CSS，但错过了一些“100%”的表现。所以在任何地方 bootstrap 使用“100%”定位或转换你只需用你的“16%”替换它:
/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
@media all and (transform-3d), (-webkit-transform-3d) {
#myCarousel .carousel-inner > .item.next,
#myCarousel .carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(16%, 0, 0);
transform: translate3d(16%, 0, 0);
}
#myCarousel .carousel-inner > .item.prev,
#myCarousel .carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-16%, 0, 0);
transform: translate3d(-16%, 0, 0);
}
#myCarousel .carousel-inner > .item.next.left,
#myCarousel .carousel-inner > .item.prev.right,
#myCarousel .carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#myCarousel .carousel-inner > .active {
left: 0;
}
#myCarousel .carousel-inner > .next {
left: 16%;
}
#myCarousel .carousel-inner > .prev {
left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
left: 0;
}
#myCarousel .carousel-inner > .active.left {
left: -16%;
}
#myCarousel .carousel-inner > .active.right {
left: 16%;
}
更新的fiddle
关于javascript - Jquery/Bootstrap 3 Slider(移动单个元素)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28701957/