There is a great slick plugin, even an angular deactivate, but it doesn't work with models. Who used what, share. We need a carousel so that several slides are on the active page, and so that it was possible to insert not only a picture but also any html elements.

    2 answers 2

    We use OwlCarousel2 with a small wrapper directive. The call turns out such

    <ul owl-carousel owl-options="owlOptions"> <li class="item owl-item" ng-repeat="item in items"> <!-- content --> </li> </ul>

    UPD: In the directive on a timeout we cause, approximately so

     app.directive('owlCarousel', ['$timeout', function ($timeout) { return { restrict: 'A', scope: { owlOptions: '=' }, link: function (scope, element, attrs) { $timeout(function () { // ... var owl = $(element).owlCarousel(scope.owlOptions); // ... }); }; }]);
    • And at what point do you do this $ ('. Owl-carousel'). OwlCarousel ()? Every time the data changes? or once during initialization? - A50
    • By timeout call. Updated the answer. - Alexander Anikeev
    • Is it good practice to use time out? - A50
    • I would say - frequent. Especially when you need to make a safe $ apply (even though there is also $ applyAsync, but sometimes you just need a timeout). - Alexander Anikeev

    I use slick. I did not find anything better myself. In extreme cases, use jQuery.

    • I tried to take the usual slick, get the data, add it to the DOM via ng-repeat (everything appears on the page), then call $ ('. Lenta'). Slick (); But nothing works. - A50