Owlcarousel crash display when Nav back to page

Question

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:

First access to the page:

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
            }
        }
    });
}

Answer 1

Try using the pageshow event to mount the slider again by clicking the browser back. This happens because the ready event is not triggered when returning to the page.

https://stackoverflow.com/a/12648785/679240

$(window).on('pageshow', function(){
    renderCarousel(owlCarousel);
});