jQuery的/引導3滑塊（移動單個項目）

JSFiddle of Problem jQuery的/引導3滑塊（移動單個項目）

我有一個滑塊，我挑了另一個帖子裏面有一個非常類似的問題。滑塊的目的是在屏幕上同時顯示多個元素，而不是一個元素。然後這些將會一個接一個地移出屏幕，並被另一個屏幕取代。

例

1 - 2 - 3 - 4 - 5 - 6 >>> 2 - 3 - 4 - 5 - 6 - 7 >>> 3 - 4 - 5 - 6 - 7 - 8

當前，滑塊一次移動整行，而不是隻滑動一個向右/向左。任何幫助，將不勝感激。

感謝

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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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)); 
    } 
    }); 
});

來源

2015-02-24 user3062123

你開始你的CSS正確的方式，但錯過了一些「100％」出場。所以處處引導使用「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

來源

2015-02-24 19:42:54

這工作，但有什麼辦法擺脫滯後的那每次轉換後都會發生？感覺就像在每次轉換之後它正在修正圖像寬度。 – user3062123 2015-02-24 21:00:29

編輯：工作正常，必須是jfiddle。非常感謝 – user3062123 2015-02-24 21:37:09

jQuery的/引導3滑塊（移動單個項目）

回答

相關問題