I have an owl carousel implemented in my website homepage, and it works fine when it's the first acccess to the page, but when I navigate to another page on my website and then click the button to go back to home page the directive crash and show images non formatted, see the example:
That's when I nav to another page and go back to my home page, where the directive is:
My HTML:
<div class="carousel-wrap" ng-show="!internalControl.galleryShow">
<div class="owl-carousel owl-theme">
<div class="item" ng-repeat="slide in slides">
<a href="http://www.google.com" target="_blank">
<img src="{{ slide.imagemUrl }}" alt="{{ slide.descritivo }}"/>
<span class="img-text">{{ slide.descritivo }}</span>
</a>
</div>
</div>
</div>
My JavaScript:
$(document).ready(function() {
var owlCarousel = $('.owl-carousel');
renderCarousel(owlCarousel);
})
function renderCarousel(owl) {
owl.owlCarousel({
loop: false,
margin: 10,
nav: true,
dots: false,
navText: ["<div class='nav-btn prev-slide'><i class='fa fa-chevron-left' aria-hidden='true'></i></div>", "<div class='nav-btn next-slide'><i class='fa fa-chevron-right' aria-hidden='true'></i></div>"],
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
});
}