Easy Draggable Slider Carousel Plugin - jQuery Jelly Slider
File Size: | 8.54 KB |
---|---|
Views Total: | 4248 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Jelly Slider is a tiny jQuery slider plugin for creating customizable, draggable, and infinitely looping carousels in an easy way.
More Features:
- Fade or Slide transitions.
- Multiple slides per view.
- Navigation arrows.
How to use it:
1. Insert the necessary JavaScript and CSS files into the HTML document.
<link rel="stylesheet" href="/path/to/jellySlider.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.jellySlider.js"></script>
2. Create a basic slider from a group of DIV elements as follows:
<div id="example" class="jelly-slider"> <div class="jelly-list"> <div class="jelly-slide"> Slide 1 </div> <div class="jelly-slide"> Slide 2 </div> <div class="jelly-slide"> Slide 3 </div> ... more slides here ... </div> </div>
$(function(){ $('#example').jellySlider(); });
3. Enable the infinite loop mode.
$(function(){ $('#example').jellySlider({ loop: true }); });
4. Enable the draggable functionality, which means that users can switch between slides via mouse drag.
$(function(){ $('#example').jellySlider({ drag: true }); });
5. Set the space (in px) between slides.
$(function(){ $('#example').jellySlider({ margin: 10 }); });
6. Set the number of slides to show per view. Default: 1.
$(function(){ $('#example').jellySlider({ view: 6 }); });
7. Change the transition effect to fade. Default: false.
$(function(){ $('#example').jellySlider({ fade: true }); });
8. Determine whether to show the navigation arrows. Default: true.
$(function(){ $('#example').jellySlider({ arrows: false }); });
9. Set the transition speed in ms. Default: 500.
$(function(){ $('#example').jellySlider({ speed: 1000 }); });
This awesome jQuery plugin is developed by Doeuning. For more Advanced Usages, please check the demo page or visit the official website.