owari owari - 1 year ago 603
CSS Question

Owl Carousel, navigation disabled after reaching first/last item

I'm trying to use owl carousel for my website. I want to disable the navigation after it reach first/last item, for example by adding "disabled" class in navigation then disable it via css. Is it possible?

my code

$(document).ready(function() {
var owl = $("#owl-demo");
rewindNav : false,
pagination : false,
items : 4
// Custom Navigation Events

.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 class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>


Answer Source

You can use callbak afterAction and with your custom controls

afterAction: function(){
  if ( this.itemsAmount > this.visibleItems.length ) {

    if ( this.currentItem == 0 ) {
    if ( this.currentItem == this.maximumItem ) {

  } else {

Check the working demo - http://jsfiddle.net/p3d52z4n/9/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download