owl Carousel 滑块中的工作导航不正确

Question

我有滑块 owl carusel https://owlcarousel2.github.io/OwlCarousel2/ 如果我在 owl-nav next 按钮上单击 4 次，他会显示滑块中的第四个元素。他不能正确使用导航。 owl 处的点不起作用

$('.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>

Answer 1

$('.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>

如果您看到消息 $ 未定义，则表示您没有将 jquery 引用到您的项目。

而且我认为 Owl 旋转木马也需要 JQuery。

尝试将 JQuery 添加到您的项目中：

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

或者您可以下载它并添加到您的项目，并从本地文件夹添加它：

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

Answer 2

<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script src="https://www.estelab.ru/owlcarousel/owl.carousel.min.js"></script>

owl Carousel 滑块中的工作导航不正确

Uncorrect working navs in owlCasusel slider

jquery

owl-carousel