Responsive Any Content Carousel Plugin - jQuery JumboSlider

JumboSlider is a simple-to-use, fully responsive jQuery slider & carousel plugin for showcasing any kind of content (images, products, videos, testimonials, etc) on the web application.

More Features:

• Navigation arrows.
• Pagination bullets.
• Keyboard interactions.
• Autoplay or not.
• Infinite loop or not.
• Configurable transition effect.
• Auto adapts to the content size.

How to use it:

1. To get started, download the package and insert the following JavaScript & CSS files into the document.

<link href="/path/to/dist/css/jumboslider.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.jumboslider.js"></script>

2. Wrap your content into the slider following the markup structure like these:

<div class="jumboslider">
  <div class="jumboslider-viewport">
    <div class="jumboslider-overview">
      <div class="jumboslider-item">
        Any Content Here
      </div>
      <div class="jumboslider-item">
        Any Content Here
      </div>
      <div class="jumboslider-item">
        Any Content Here
      </div>
      <div class="jumboslider-item">
        Any Content Here
      </div>
      <div class="jumboslider-item">
        Any Content Here
      </div>
    </div>
  </div>
</div>

3. Call the jumboslider function and the plugin will do the rest.

$.jumboslider();

4. Or call the plugin and determine the selector of the target container. Default: '.jumboslider'.

$.jumboslider({
  target: $('.mySlider')
});

5. Enable/disable the slider controls.

$.jumboslider({
  arrows: true,
  pagination: true
});

6. Set the start slide on page load. Default: 1 (slide 1).

$.jumboslider({
  startPosition: 2
});

7. Enable/disable the infinite loop functionality. Default: false.

$.jumboslider({
  loop: true
});

8. Enable/disable the autoplay functionality. Default: false.

$.jumboslider({
  autoplay: 3000
});

9. Determine the transition speed in milliseconds. Default: 500.

$.jumboslider({
  transition: 600
});

10. API methods.

// go to the next slide
mySlider.slideNext();

// go to the prev slide
mySlider.slidePrev();

// go to a specific slide
mySlider.slideTo(5);

11. Event handlers.

mySlider.on('onSlide', function(e, target) {
  // do something
});

mySlider.on('onArrowClick', function(e, target) {
  // do something
});

mySlider.on('onPaginationClick', function(e, target) {
  // do something
});

---

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