owlCasusel 滑块中的工作导航不正确答案

【问题标题】：Uncorrect working navs in owlCasusel sliderowlCasusel 滑块中的工作导航不正确
【发布时间】：2021-09-07 07:30:04
【问题描述】：

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

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

【问题讨论】：

标签： jquery owl-carousel

【解决方案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 Carousel 也需要 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/>

【讨论】：

我的项目中有 jquery。我在 owl-carusel 的项目中有另一个滑块
我正在尝试，我会发布更新的答案。

【解决方案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>

【讨论】：