Owl Carousel - Click Event
Author: Bartosz Wojciechowski
Description: jQuery Responsive Carousel - Owl Carusel

# Click events inside content.

# 1

# 2

# 3

# 4

# 5

# 6

# 7

# 8

# 9

# 10

# 11

# 12

# 13

# 14

# 15

# 16

# 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 adding`mouseDraggable: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;
    }

# More Demos

### Images

### Full Width

### Custom

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height