Owl-carousel images instead of dots

Another option, also without plugins. It works even when there are more than one carousel.

JS, jQuery:

<script>
    jQuery(document).ready(function($) {

        let outs = document.querySelectorAll('.owl-out');

        for (let out of outs) {

            let owl = out.querySelector('.owl-carousel');
            let btns = out.querySelectorAll(':scope .thumb');

            let owlJq = $(owl);
            owlJq.owlCarousel({
                items: 1,
                loop: false,
                margin: 10,
                nav:true,
                dots: false,
            });

            for (let btn of btns) {
                btn.addEventListener('click', function () {
                    owlJq.trigger('to.owl.carousel', [$(this).index()]);
                })
            }
        };

    });

</script>

HTML:

<div class="owl-out">
    <div class="owl-carousel owl-theme">
        <div class="item" style="width:250px; height: 200px; background-color: gray; font-size: 25px; color: white;">1</div>
        <div class="item" style="width:250px; height: 200px; background-color: gray; font-size: 25px; color: white;">2</div>
        <div class="item" style="width:250px; height: 200px; background-color: gray; font-size: 25px; color: white;">3</div>
    </div>
    <div class="thumbs">
        <button class="thumb" role="button">btn 1</button>
        <button class="thumb" role="button">btn 2</button>
        <button class="thumb" role="button">btn 3</button>
    </div>
</div>