Basic Mobile-friendly jQuery Carousel Plugin

A basic jQuery slider plugin to create a responsive & mobile first content carousel with mouse drag & touch swipe support. jQuery touchSwipe plugin is required for detecting swipe events on on touch input devices and falling back to mouse 'drags' on the desktop.

Basic usage:

1. Load the necessary jQuery library and the jQuery touchSwipe plugin in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>

2. Load the jQuery touchSwipe Carousel plugin's stylesheet and script in the document.

<script src="bp-touchSwipe.css"></script>
<script src="bp-touchSwipe.min.js"></script>

3. Wrap the carousel content into DIV elements as follow.

<div class="bp-touchSwipe">
  <div class="bp-touchSwipe_inner">
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
    <div class="bp-inner_item"></div>
  </div>
</div>

4. Style the carousel whatever you like.

.bp-touchSwipe .bp-inner_item {

  ...

}

---

This awesome jQuery plugin is developed by boompx. For more Advanced Usages, please check the demo page or visit the official website.