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

Редактирование: отлично работает, должно быть просто jfiddle. спасибо – user3062123

Jquery/Бутстрап 3 Ползунок (Перемещение отдельных элементов)

ответ

Смежные вопросы