<div class="owl-carousel">
    <div ng-repeat="items in itemlist"> 
        <a href="series.html"><img ng-src="{{items.imageUrl}}" /></a>
    </div>
    <div> 
      <a href="series.html"><img src="http://placehold.it/350x150" /></a>
    </div>
 </div>

Karussell hier ansehen: Owl-carousel2

Ich stoße auf ein Problem, bei dem die Elemente immer dann, wenn die ng-repeat-Direktive auf das Karussell angewendet wird, vertikal gestapelt werden, anstatt horizontal angeordnet zu werden.

Wenn ich ng-repeat weglasse und statische Elemente verwende, funktioniert es so, wie es sollte.

Gibt es eine Direktive, die ich schreiben und auf das Eulenkarussell anwenden kann, um das Layout beizubehalten?

Auch was ist mit ng-repeat, bei dem das Karussell kaputt geht?

Ist es eckig, die auf das Karussell angewendeten Eulen-Karussell-Klassen irgendwie zu entfernen?

Hinweis * Wenn Sie die Liste manuell erstellen, durchlaufen Sie die Elemente und hängen Sie sie an:

var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');            
.....       
carousel.appendChild(div);

then call the owl.owlCarousel ({..}) Es funktioniert, nicht sicher, ob dies die beste Lösung ist, da ng-repeat alles ein bisschen einfacher macht.

Ich habe einen Hack entdeckt. Wenn ich den Eulen-Init in ein Timeout einbinde, funktioniert ng-repat.

setTimeout(function(){
      ...call owl init now  
},1000);

<link rel="stylesheet" href="css/owl.carousel.css"/>
<link rel="stylesheet" href="css/owl.theme.default.min.css"/>

.....
    <script src="/js/lib/owl.carousel.min.js"></script> 
        <script>
             $(document).ready(function() {
               var owl = $('.owl-carousel');
               owl.owlCarousel({
                 .....
               });
               owl.on('mousewheel', '.owl-stage', function(e) {
                 if (e.deltaY > 0) {
                   owl.trigger('next.owl');
                 } else {
                   owl.trigger('prev.owl');
                 }
                 e.preventDefault();
               });
             })

        </script>