貓頭鷹旋轉木馬返回錯誤與更高版本的jQuery

我想在我的網站上安裝貓頭鷹旋轉木馬2。我爲貓頭鷹旋轉木馬添加了以下文件。貓頭鷹旋轉木馬返回錯誤與更高版本的jQuery

<script src="~/Scripts/jquery-3.1.1.min.js" defer></script> 
<script src="~/Scripts/js/owl-carousel.js"defer></script> 
<link rel="stylesheet" href="~/Content/css/owl.carousel.css">

添加下面的函數調用jQuery的

$(".owl-demo").owlCarousel({ 
     items: 2, 
     itemsDesktop: [1199, 2], 
     itemsDesktopSmall: [979, 3], 
     pagination: false, 
     rewindNav: false, 
     slideBy: 2, 
     scrollPerPage: true, 
     afterAction: function() { 
      if (this.itemsAmount > this.visibleItems.length) { 
       $('.next').show(); 
       $('.prev').show(); 

       $('.next').removeClass('disabled'); 
       $('.prev').removeClass('disabled'); 
       if (this.currentItem == 0) { 
        $('.prev').addClass('disabled'); 
       } 
       if (this.currentItem == this.maximumItem) { 
        $('.next').addClass('disabled'); 
       } 
      } else { 
       $('.next').hide(); 
       $('.prev').hide(); 
      } 
     } 
    }); 

    $(".next").click(function() { 
     $(".owl-demo").trigger('owl.next'); 
    }) 
    $(".prev").click(function() { 
     $(".owl-demo").trigger('owl.prev'); 
    })

添加下面的HTML代碼

<div class="carousel"> 
          <div class="owl-demo owl-carousel"> 
           <div class="item"> 
            <img src="~/Images/slider-img.png" /> 
            <div class="img-title">text will come here</div> 
           </div> 
           <div class="item"> 
            <img src="~/Images/slider-img.png" /> 
            <div class="img-title">text will come here</div> 
           </div> 
           <div class="item"> 
            <img src="~/Images/slider-img.png" /> 
            <div class="img-title">text will come here</div> 
           </div> 
           <div class="item"> 
            <img src="~/Images/slider-img.png" /> 
            <div class="img-title">text will come here</div> 
           </div> 
          </div> 

          <div class="customNavigation"> 
           <a id="customnavi1" class="btn prev"> 
            <img src="~/lib/images/BackButtonBlack.PNG" /> 
           </a> 
           <a id="customnavi2" class="btn next"> 
            <img src="~/lib/images/NextArrowBlack.PNG" /> 
           </a> 
          </div> 
         </div>

但仍面臨follwing問題

而且我不知道爲什麼它返回這個錯誤。

來源

2017-01-02 vedankita kumbhar

你在哪裏把owlCarousel代碼放在HTML或單獨的腳本文件中。把它放在'$（document）.ready（function（）{// code}）;'然後嘗試。 – locateganesh

我已經嘗試了兩種選擇。問題是我使用jquery-3.1.1.min.js，如果我使用較低版本的Jquery，那麼輪播工作正常。我應該在這種情況下做什麼 –

您使用的是哪個版本的owlCarousel？我用owlCarousel 2（https://owlcarousel2.github.io/OwlCarousel2/index.html）嘗試了（https://jsfiddle.net/qun0kv9n/），它沒有提供任何錯誤。檢查小提琴，我已經使用jquery-3.1.1.min.js – locateganesh

在這裏，工作fiddle演示。正如你想要的。

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

來源

2017-01-02 12:09:53 locateganesh

貓頭鷹旋轉木馬返回錯誤與更高版本的jQuery

回答

相關問題