Easy Draggable Slider Carousel Plugin - jQuery Jelly Slider

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.