1
What I need is just that (just not with this plugin, because in this it stops at the end).
I believe to be this here, I’m doing some tests.
I need to do a Carousel that has a range of 5 slides on the screen, and when I click the right arrow, it only walks one at a time. Here have an example, and here other (1) than I need. This other (1) is closer than I need, however, the slides will come from a dynamic collection. There in the example they are entered manually. The problem is how to make them come from the controller with ng-repeat or something like.
And at this link, is doing exactly the way I don’t want to (my Carousel is more or less like this today).
I’m using Angularjs, I tried to do such, and I had the first problem, only appeared one at a time, so I doubled the list now is appearing all, but it’s not changing 1 to 1, it changes the entire range of 5 at a time and not 1 at a time. Also, it is not doing the sequence correctly (see 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;
}
Obs: maybe I have to do it to fit something, I still don’t know how to solve:
ng-repeat="recente in recentes.splice(5, 0)"(remove 5 items in index 0)
Adding: