javascript – 猫头鹰旋转木马,达到第一个/最后一个项目后禁用导航

我正在为我的网站使用猫头鹰旋转木马.我想在到达第一个/最后一个项目后禁用导航,例如通过在导航中添加“disabled”类,然后通过css禁用它.可能吗？

$(document).ready(function() {
  var owl = $("#owl-demo");
  owl.owlCarousel({
    rewindNav : false,pagination : false,items : 4
  });
  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
});

.item { background: #e5e5e5; margin: 10px}
.btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor: pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />
 
<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
</div>
 
<div class="customNavigation">
  <a class="btn prev">PrevIoUs</a>
  <a class="btn next">Next</a>
</div>

http://jsfiddle.net/p3d52z4n/1/

解决方法

您可以使用callBak afterAction和您的自定义控件

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();
  }
}

检查工作演示 – http://jsfiddle.net/p3d52z4n/9/

javascript – 猫头鹰旋转木马,达到第一个/最后一个项目后禁用导航

解决方法

猜你在找的JavaScript相关文章