How to link navigation to an image?

Question

JavaScript

Good afternoon.
The project uses OwlCarousel 2.х.х.
The question is how to bind the functions of the navigation buttons back and forth to custom images.

I tried to do it like this (I found such a solution on one site, but apparently I’m not using it correctly - it doesn’t work):

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        items: 1,
        loop: true,
        autoplay: true,
        smartSpeed: 1000,
        nav: false,
        dots: false,
        }
    );

    $(".next-image").click(function() {
    owl_review.trigger('owl.next');
    });

    $(".prev-image").click(function() {
    owl_review.trigger('owl.prev');
    });
});

Answer 1

$(document).ready(function(){
    var owl_review = $('.owl-carousel');

    owl_review .owlCarousel({
        items: 1,
        loop: true,
        autoplay: true,
        smartSpeed: 1000,
        nav: false,
        dots: false,
        }
    );

    $(".next-image").click(function() {
        owl_review.trigger('owl.next');
    });

    $(".prev-image").click(function() {
        owl_review.trigger('owl.prev');
    });
});

Answer 2

$('.prev-image').click(function(){
  $('.owl-carousel').trigger('prev.owl.carousel', [300]);
});