Shopping cart is empty.

Click events inside content.

Setup

Enabling click events inside content was the biggest challenge while building this plugin. Please don't use mouseup and mousedown events, they are reserved for mouse dragging events unless you have to use them. In this case you can disable mouse draggable capabilities by addingmouseDraggable:false in options.

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    items : 10
  });

  $('.link').on('click', function(event){
    var $this = $(this);
    if($this.hasClass('clicked')){
      $this.removeAttr('style').removeClass('clicked');
    } else{
      $this.css('background','#7fc242').addClass('clicked');
    }
  });

});
<div id="owl-demo" class="owl-carousel">
  <a class="item link"><h1>1</h1></a>
  <a class="item link"><h1>2</h1></a>
  <a class="item link"><h1>3</h1></a>
  <a class="item link"><h1>4</h1></a>
  <a class="item link"><h1>5</h1></a>
  <a class="item link"><h1>6</h1></a>
  <a class="item link"><h1>7</h1></a>
  <a class="item link"><h1>8</h1></a>
  <a class="item link"><h1>9</h1></a>
  <a class="item link"><h1>10</h1></a>
  <a class="item link"><h1>11</h1></a>
  <a class="item link"><h1>12</h1></a>
  <a class="item link"><h1>13</h1></a>
  <a class="item link"><h1>14</h1></a>
  <a class="item link"><h1>15</h1></a>
  <a class="item link"><h1>16</h1></a>
</div>
#owl-demo .item{
  display: block;
  cursor: pointer;
  background: #ffd800;
  padding: 30px 0px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
}
#owl-demo .item:hover{
  background: #F2CD00;
}

Contact Us

We look forward to hearing from you

Ph: (Australia) 02 9818 4200
Glade View, 446 Victoria Rd (Cnr Tennyson Road), Gladesville NSW 2111 AUSTRALIA