I'm using Carousel UI-Bootstrap with AngularJs, but only shows 1 slide at a time. I wanted multiple slides like these examples below.
Bootstrap 3 Multiple Slide Carousel , another example, Bootstrap 3 Carousel Multiple Items Increment by 1
Is it possible to do multiple slides using Ui-Bootstrap with AngularJs? Or would you have to use the Angular Slick directive?
I chose to use Owl Carousel on AngularJs.
app.owl.js
angular
.module('appCliente.owl', []);
function owlCarousel() {
var directive = {
restrict: 'E',
transclude: false,
link: link
};
return directive;
function link(scope) {
scope.initCarousel = function (element) {
console.log('initcarousel');
var defaultOptions = {};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for (var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// Inicia o OwlCarousel
var curOwl = $(element).data('owlCarousel');
if (!angular.isDefined(curOwl)) {
$(element).owlCarousel(defaultOptions);
}
}
}
}
angular
.module('appCliente.owl')
.directive('owlCarousel', owlCarousel);
owlCarousel-directive.js
angular
.module('appCliente.owl')
.directive('owlCarouselItem', owlCarouselItem);
function owlCarouselItem() {
var directive = {
link: link,
restrict: 'A',
transclude: false
};
return directive;
function link(scope, element) {
/* Ultimo item do ng-repeat */
if (scope.$last) {
console.log('1st element');
scope.initCarousel(element.parent());
}
}
}
Index.html
<!-- OWL Carousel -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<div class="container">
<h3 class="text-center alert novo">Novos Mangas</h3>
<data-owl-carousel class="owl-carousel owl-theme" id="owl-example" data-options="vm.default">
<div owl-carousel-item="" class="thumb" ng-repeat="manga in vm.novosMangas">
<a ui-sref="nav.manga.detalhe({mangasId:manga.id})">
<img class="img2" data-ng-src="data:image/jpeg;base64,{{manga.capa}}" ng-if="manga.capa">
<img class="img2" src="/app/img/image.JPG" ng-if="!manga.capa">
</a>
<div class="centered">
{{manga.nome}}
</div>
</div>
</data-owl-carousel>
</div>