August 8, 2022

Customizable, Draggable, and Infinitely Looping Carousels | Jelly Slider

Jelly Slider is a small jQuery slider plugin for creating customizable, draggable carousels and infinite loops in an easy way.

jquery banner slider, jquery slider carousel, jquery carousel slider example, responsive slider, jquery image slider plugin, jquery slider plugin, jquery image slider code

How to make use of it:

1. Insert the required JavaScript and CSS files into the HTML doc.

<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 primary slider from a bunch of DIV components 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 performance, which implies that customers can change between slides through mouse drag.

$(function(){
  $('#example').jellySlider({
    drag: true
  });
});

5. Set the area (in px) between slides.

$(function(){
  $('#example').jellySlider({
    margin: 10
  });
});

6. Set the variety of slides to point out per view.

$(function(){
  $('#example').jellySlider({
    view: 6
  });
});

7. Change the transition impact to fade.

$(function(){
  $('#example').jellySlider({
    fade: true
  });
});

8. Determine whether or not to point out the navigation arrows.

$(function(){
  $('#example').jellySlider({
    arrows: false
  });
});

9. Set the transition velocity in ms.

$(function(){
  $('#example').jellySlider({
    speed: 1000
  });
});

Easy Draggable Slider Carousel Plugin, Jelly Slider Github, jquery image slider free download with source code


See Demo And Download

Official Website(Doeuning): Click Here

This superior jQuery/javascript plugin is developed by Doeuning. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.