O que preciso é exatamente isso (só que não com esse plugin, pois neste ele para no final).
Acredito ser isso aqui, estou fazendo alguns testes.
Preciso fazer um carousel que tenha um range de 5 slides na tela, e quando clicar na seta da direita, ele ande apenas um por vez. Aqui tem um exemplo, e aqui outro (1) do que eu preciso. Este outro (1) é mais próximo do que preciso, porém, os slides vão vir de uma coleção dinâmica. Ali no exemplo eles estão inseridos manualmente. O problema é como fazer eles virem do controller com ng-repeat ou algo do tipo.
E neste link, está fazendo exatamente da maneira que eu não quero (meu carousel está mais ou menos assim hoje).
Estou usando AngularJS, tentei fazer o tal, e tive o primeiro problema, só aparecia um por vez, então eu dupliquei a lista agora está aparecendo todos, porém não está mudando 1 a 1, ele muda o range de 5 inteiro de uma vez e não 1 por vez. Além disso, ele não está fazendo a sequência corretamente (veja na observação abaixo).
Controller:
.controller("HomeController", [
"$scope",
function($scope) {
$scope.displayItem = function(selected) {
$location.path('/conteudo/'+selected.section_id+'/'+selected.edition_id+'/'+selected.slug_title);
};
$scope.recentes = [{
id:5,
edition_id:152,
section_id :753,
title:"Edição nº 118",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_6941194375.jpg"
},{
id:6,
edition_id:152,
section_id :753,
title:"Edição nº 119",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_6702983691.png"
},{
id:4,
edition_id:152,
section_id :753,
title:"Edição nº 120",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_8087695292.jpeg"
},{
id:4,
edition_id:152,
section_id :753,
title:"Edição nº 121",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_8905819151.jpg"
},{
id:4,
edition_id:152,
section_id :753,
title:"Edição nº 122",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_8087695292.jpeg"
},{
id:4,
edition_id:152,
section_id :753,
title:"Edição nº 123",
subtitle:"Trigonometria nos tempos da Babilônia",
slug_title: "trigonometria-nos-tempos-da-babilonia",
imagem:"/test/uploader/uploads/232_image_8905819151.jpg"
}];
$scope.pageCarousel = function(el) {
$('#'+el).carousel({
interval: false
});
$('#'+el+' .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));
}
});
};
}]);
View:
<div class="gallery-carousel">
<div class="carousel slide" id="recentes" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="recente in recentes" class="item" ng-class="{'active': recente == recentes[0]}">
<div class="col-xs-3 col-md-3">
<a href="javascript:void(0)" ng-click="displayItem(recente)">
<img ng-src="{{recente.imagem}}" class="img-responsive img-scroll">
<h3>{{recente.title}}</h3>
<p>{{recente.subtitle}}</p>
</a>
</div>
</div>
<div ng-repeat="recente in recentes" class="item" ng-class="{'active': recente == recentes[1]}">
<div class="col-xs-3 col-md-3">
<a href="javascript:void(0)" ng-click="displayItem(recente)">
<img ng-src="{{recente.imagem}}" class="img-responsive img-scroll">
<h3>{{recente.title}}</h3>
<p>{{recente.subtitle}}</p>
</a>
</div>
</div>
<div ng-repeat="recente in recentes" class="item" ng-class="{'active': recente == recentes[2]}">
<div class="col-xs-3 col-md-3">
<a href="javascript:void(0)" ng-click="displayItem(recente)">
<img ng-src="{{recente.imagem}}" class="img-responsive img-scroll">
<h3>{{recente.title}}</h3>
<p>{{recente.subtitle}}</p>
</a>
</div>
</div>
<div ng-repeat="recente in recentes" class="item" ng-class="{'active': recente == recentes[3]}">
<div class="col-xs-3 col-md-3">
<a href="javascript:void(0)" ng-click="displayItem(recente)">
<img ng-src="{{recente.imagem}}" class="img-responsive img-scroll">
<h3>{{recente.title}}</h3>
<p>{{recente.subtitle}}</p>
</a>
</div>
</div>
<div ng-repeat="recente in recentes" class="item" ng-class="{'active': recente == recentes[4]}">
<div class="col-xs-3 col-md-3">
<a href="javascript:void(0)" ng-click="displayItem(recente)">
<img ng-src="{{recente.imagem}}" class="img-responsive img-scroll">
<h3>{{recente.title}}</h3>
<p>{{recente.subtitle}}</p>
</a>
</div>
</div>
</div>
<!--<a class="left carousel-control" href="#recentes" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>-->
<a class="right carousel-control" ng-click="pageCarousel('recentes')" href="javascript:void(0)" data-ride="carousel" data-target="#recentes" data-interval="false" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>
</div>
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;}
.carousel-control i {
font-size: 56px;
margin-top: 45px;
}
Obs: talvez tenha que fazer isso para adequar alguma coisa, ainda não sei como resolver:
ng-repeat="recente in recentes.splice(5, 0)"
(remover 5 itens no índice 0)
Adicionando: