angular-carousel: overflow-x: scroll inside a slide

Question

i'm trying to create a carousel that inside of it will be scrollable div with images.

The problem is that the swipe events conflict with eachother.

Plunker (the images are on slide 2)

My code:

 <div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
  <li ng-swipe-left="left($event)">slide #1</li>
  <li ng-swipe-right="right($event)">slide #2

    <div class="horizontal-slide">
      <div class="span2">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x100" alt="" />
        </a>
      </div>
      
      <div class="span2">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x100" alt="" />
        </a>
      </div>
      <div class="span2">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x100" alt="" />
        </a>
      </div>
      <div class="span2">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x100" alt="" />
        </a>
      </div>
    </div>

  </li>
  <li>slide #3</li>
</ul>

Thank's alot

Avi