Basic Touch-enabled jQuery Scroller Plugin - cSlider

cSlider is a small and easy-to-use jQuery plugin used to scroll horizontally through a list of html content with support for arrows navigation and drag / touch swipe events.

Dependencies:

• jQuery
• jQuery UI - For mouse drag support
• jQuery UI Touch Punch - For touch swipe support

How to use it:

1. Load the jQuery cSlider plugin's stylesheet file in the head section for basic scroller styles.

<link rel="stylesheet" href="css/cSlider.css">

2. Add a list of html content to the scroller.

<ul class="scroller">
  <li class="scroller-slide">
    Content 1
  </li>

  <li class="scroller-slide">
    Content 2
  </li>

  <li class="scroller-slide">
    Content 3
  </li>
</ul>

3. Load jQuery library the jQuery cSlider plugin's script at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="js/cSlider.js"></script>

4. Load the other required resources for mouse drag and touch swipe support.

<script src="jquery-ui.min.js"></script>
<script src="touch-punch.js"></script>

5. Initialize the scroller.

$('.scroller').cSlider();

6. Default configuration options.

// animation options
slideDuration: '3000',
speed: 500,

// custom next / prev arrows
nextArrow: '<button class="cSlider-arrow cSlider-arrow-next"></button>',
prevArrow: '<button class="cSlider-arrow cSlider-arrow-prev"></button>',

// offset percentage
offsetPercent: .7

---

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