javascript - Using mutliple Owl Carousel navigation issue

Question

I have created an multiple Owl Carousel with same class name dynamically on single page. The Carousel is working completely fine but the issue that the navigation (arrows & dots) for all carousel is showing on first once only.

My code:

$(".owlCarouselSlide").each(function() {
$(this).owlCarousel({
    loop: false,
    autoWidth: true,
    nav: true,
    dots: true,
    navContainer: '#custCarouselProductNav',
    dotsContainer: '#custCarouselProductDot',
    responsive: {
        0: {
            items: 1,
            margin: 10,
        },
        600: {
            items: 1,
            autoWidth: true,
            margin: 24,
        },
        1000: {
            items: 1,
            margin: 16,
        },
    }
})
 });

Issue screenshot:

标签： javascripthtmlowl-carousel