Owlcarousel2: Hide owl-prev on page load

[cyberformed]

How to hide owl-prev on page load. I have used the initialized.owl.carousel but, this code block does not hide the previous navigation on page load. Does anyone have any idea. I am putting the entire code block here.

$(".owl-demo-featured").owlCarousel({
        items: 3,
        nav: true,
        slideBy: 3,
        autoplay: false,
        margin: 20,
        responsiveClass:true,
        responsive: {
            0: {
                items: 1,
                nav: false,
                center:true
            },
            480: {
                items: 2,
                nav: false
            },
            600: {
                items: 2,
                nav: false
            },
            1000: {
                items: 3,
                nav: false,
            }
        }
    });
// Custom Navigation Events
    $(".next2").click(function () {
        $('.owl-demo-featured').trigger('next.owl.carousel');
    })
    $(".prev2").click(function () {
        $('.owl-demo-featured').trigger('prev.owl.carousel');
    })
    $(".owl-demo-featured").on('initialized.owl.carousel', function (event) {
        if (!event.namespace) {
            return;
        }
        var carousel = event.relatedTarget,
            element = event.target,
            current = carousel.current();
        $('.next2', element).toggleClass('disabled', current === carousel.maximum());
        $('.prev2', element).toggleClass('disabled', current === carousel.minimum());
    });
    $('.owl-demo-featured').on('change.owl.carousel', function (e) {
        var visibleSlides = e.page.size;
        var prevBtn = $('.prev2');
        var nextBtn = $('.next2');
        prevBtn.show();
        nextBtn.show();
        if (e.namespace && e.property.name === 'position' && e.relatedTarget.relative(e.property.value) === 0) {
            prevBtn.hide();
        }
        if (e.namespace && e.property.name === 'position' && e.relatedTarget.relative(e.property.value) === e.relatedTarget.items().length - visibleSlides) {
            nextBtn.hide();
        }
    });

[cyberformed]

Everything worked for me, except the previous navigation is not hiding on page load.

[despecial]

This worked for me if you load the carousel on item 1:

On the carousel init:

        navClass: [
            "owl-prev hidden",
            "owl-next"
        ],

Plus this:

    your_carousel.on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
        if (!event.namespace) return;
        var carousel = event.relatedTarget,
             element = event.target,
             current = carousel.current();
        $('.owl-next', element).toggleClass('hidden', current === carousel.maximum());
        $('.owl-prev', element).toggleClass('hidden', current === carousel.minimum());
    });

Hides first and last nav link

[cyberformed]

Somehow I have found to sort this mess out, but it's not working.
Add disabled class to css.

.disabled {
    visibility: hidden !important;
}

$(".owl-demo-featured").on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
    var carousel = event.relatedTarget,
        element = event.target,
        current = carousel.current();
    $('.next2', element).toggleClass('disabled', current === carousel.maximum());
    $('.prev2', element).toggleClass('disabled', current === carousel.minimum());
}).owlCarousel({
    items: 3,
    slideBy: 3,
    dots: false,
    nav: true,
    navText: ['<', '>'],
    margin: 10
});

[despecial]

1.) Are your next and previous classes set as .next2 .prev2 or do you use the default ones? (.owl-next, owl-prev)

2.) you have to init the carousel first and not combine both. It's two seperate functions..