<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>
Take a look at the carousel here: Owl-carousel2
I have encountered an issue where applying the ng-repeat directive to the carousel causes the items to stack vertically instead of being arranged horizontally.
When I remove the ng-repeat and use static items, everything works as intended.
Is there a specific directive that I can write and apply to owl-carousel to maintain the horizontal layout?
What is it about ng-repeat that breaks the carousel?
Could Angular be removing the owl-carousel classes from the carousel somehow?
**Note**: If I manually build the list and then iterate through and append the elements using:
var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');
.....
carousel.appendChild(div);
and then call owl.owlCarousel({..}), it works. However, I'm not sure if this is the best workaround since ng-repeat makes everything easier.
I found a hack where if I wrap the owl init in a timeout, then ng-repat works.
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>