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