Angular UI-Carousel Bootstrap with Multiple Slides

Question

I’m using the Carousel UI-Bootstrap with Angularjs, but only shows 1 slide at a time. I wanted multiple slides equal to these examples below.

Bootstrap 3 Multiple Slide Carousel, another example, Bootstrap 3 Carousel Multiple Items Increment by 1

Is it possible to make Multiple Slides using Ui-Bootstrap with Angularjs? Or would I have to use the directive Angular Slick?

My example using Ui-Bootstrap

Answer 1

I chose to use Owl Carousel in 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>
    <link href="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>