This time I will share jQuery Plugin and tutorial about Basic Touch-enabled jQuery Scroller Plugin – cSlider, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="css/cSlider.css"> |
2. Add a list of html content to the scroller.
02 |
<li class="scroller-slide"> |
06 |
<li class="scroller-slide"> |
10 |
<li class="scroller-slide"> |
3. Load jQuery library the jQuery cSlider plugin’s script at the bottom of the webpage.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="js/cSlider.js"></script> |
4. Load the other required resources for mouse drag and touch swipe support.
1 |
<script src="jquery-ui.min.js"></script> |
2 |
<script src="touch-punch.js"></script> |
5. Initialize the scroller.
1 |
$('.scroller').cSlider(); |
6. Default configuration options.
02 |
slideDuration: '3000', |
06 |
nextArrow: '<button class="cSlider-arrow cSlider-arrow-next"></button>', |
07 |
prevArrow: '<button class="cSlider-arrow cSlider-arrow-prev"></button>', |
This awesome jQuery plugin is developed by NickBeukema. For more Advanced Usages, please check the demo page or visit the official website.
