Owl carousel 2 navigation

Question

I use Owl carousel 2 plugin and I want to have the navigation buttons contained within the slide ( arrow box ) and I want to use "prev" and "next" arrows for navigating

My html

            <div class="arrow-box">
                <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
                <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
            </div>

            <div id="owl-demo" class="owl-carousel">
                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>

                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

And I use this js

var owl = $("#owl-demo").owlCarousel({
        loop:true,
        margin:10,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true
            },
            1000:{
                items:2,
                nav:true,
                loop:true
            }
        }
    });
    owl = $('#owl-demo').owlCarousel();
    $(".arrow-box .next").click(function () {
        owl.trigger('next.owl.carousel');
    });

    $(".arrow-box .prev").click(function () {
        owl.trigger('prev.owl.carousel');
    });

Answer 1

i believe the problem is, you are making owl two declarations, var owl = $("#owl-demo").owlCarousel({ and owl = $('#owl-demo').owlCarousel();

remove the second declaration.

Change owl.trigger('next.owl.carousel'); and owl.trigger('prev.owl.carousel'); to owl.trigger('owl.next'); and owl.trigger('owl.prev'); respectively.

Working Fiddle : http://jsfiddle.net/p3d52z4n/187/