Carousel multiple passing 1 item at a time

1

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:

Other examples

    
asked by anonymous 27.09.2017 / 23:50

1 answer

1

I was able to solve the problem with this example: Angular UI Carousel

<div class="gallery-carousel">
    <ui-carousel
            slides="recentes"
            slides-to-show="5"
            slides-to-scroll="1"
            autoplay="false"
            autoplay-speed="2000"
            dots="false">
        <carousel-item>
            <div class="margin-10">
                <a href="javascript:void(0)" ng-click="displayItem(item)">
                    <img ng-src="{{item.imagem}}" class="img-responsive img-scroll">
                    <h3>{{item.title}}</h3>
                    <p>{{item.subtitle}}</p>
                </a>
            </div>
        </carousel-item>
    </ui-carousel>
</div>

CSS:

.ui-icon-prev {
    display: none;
}
.ui-icon-next:before {
    content: "\f105";
    font-family: FontAwesome!important;
    padding: 6px;
    font-size: 62px;
    color: #fff;
}
.ui-carousel .carousel-btn, .v-middle {
    top:35%;
}
.ui-carousel .carousel-next .carousel-btn {
    right: 0;
}
    
28.09.2017 / 20:14