Uncorrect working navs in owlCasusel slider

I have slider by owl carusel https://owlcarousel2.github.io/OwlCarousel2/ If i click 4 times on owl-nav next button, he show me fourth element in slider. He dont works correct with navs. And dots at owl dont works

$('.main-car-owl').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
                                    });

<link rel="stylesheet" href="https://www.estelab.ru/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="https://www.estelab.ru/owlcarousel/owl.theme.default.min.css">

<div class="container">
    <div class="row-special row-first">
        <div class="main-car-owl owl-carousel owl-theme">
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h1</h2>
                    <p class="slid-p">p1</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h2</h2>
                    <p class="slid-p">p2</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h3</h2>
                    <p class="slid-p">p3</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h4</h2>
                    <p class="slid-p">p4</p>
                </div>
            </div>                  
        </div>
    </div>
</div>
<script src="https://www.estelab.ru/owlcarousel/owl.carousel.min.js"></script>

Solution

$('.main-car-owl').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
   });

<head>
<link rel="stylesheet" href="https://www.estelab.ru/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="https://www.estelab.ru/owlcarousel/owl.theme.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<head/>
<body>
<div class="container">
    <div class="row-special row-first">
        <div class="main-car-owl owl-carousel owl-theme">
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h1</h2>
                    <p class="slid-p">p1</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h2</h2>
                    <p class="slid-p">p2</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h3</h2>
                    <p class="slid-p">p3</p>
                </div>
            </div>
            <div class="item">
                <div class="img-back">
                    <h2 class="slid-h">h4</h2>
                    <p class="slid-p">p4</p>
                </div>
            </div>                  
        </div>
    </div>
</div>
<body/>
<script src="https://www.estelab.ru/owlcarousel/owl.carousel.min.js"></script>

If you see the message $ is not defined, it means you didn't reference the jquery to your project.

And I think the Owl Carousel needs JQuery too.

Try to add JQuery to your project :

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<head/>

Or you can download it and add to your project and add it from local folder :

<head>
   <script src="/Scripts/jquery/3.5.1/jquery.min.js"></script> 
<head/>