What I need is just this (just not with this plugin, because in this it stops at the end) .
I think it's here , I'm doing some testing.
I need to make a carousel that has a range of 5 slides on the screen, and when I click the right arrow, it only one step at a time. Here's an , and here another (1) of what I need. This one (1) is closer than I need, but the slides will come from a dynamic collection. There in the example they are inserted manually. The problem is how to make them come from the controller with ng-repeat or something like that.
And this link , you're doing it exactly the way I do not want it (my carousel looks more or less like this today).
I'm using AngularJS, I tried to do that, and I had the first problem, it only appeared one at a time, so I duplicated the list now it's all appearing, however it's not changing 1 to 1, it changes the range of 5 integer once and not 1 at a time. Also, it is not doing the sequence correctly (see the note below).
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;
}
Note:
You may have to do this to suit something, I still do not know how to solve it:
ng-repeat="recente in recentes.splice(5, 0)"
Adding: