content carousel jumbo - Free Download Responsive Any Content Carousel Plugin - jQuery JumboSlider

Free Download Responsive Any Content Carousel Plugin – jQuery JumboSlider

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Any Content Carousel Plugin – jQuery JumboSlider, hope it will help you in programming stack.

content carousel jumbo - Free Download Responsive Any Content Carousel Plugin - jQuery JumboSlider
File Size: 90.6 KB
Views Total: 1903
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

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

view source
01 <div class="jumboslider">
02   <div class="jumboslider-viewport">
03     <div class="jumboslider-overview">
04       <div class="jumboslider-item">
05         Any Content Here
06       </div>
07       <div class="jumboslider-item">
08         Any Content Here
09       </div>
10       <div class="jumboslider-item">
11         Any Content Here
12       </div>
13       <div class="jumboslider-item">
14         Any Content Here
15       </div>
16       <div class="jumboslider-item">
17         Any Content Here
18       </div>
19     </div>
20   </div>
21 </div>

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

view source
1 $.jumboslider();

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

view source
1 $.jumboslider({
2   target: $('.mySlider')
3 });

5. Enable/disable the slider controls.

view source
1 $.jumboslider({
2   arrows: true,
3   pagination: true
4 });

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

view source
1 $.jumboslider({
2   startPosition: 2
3 });

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

view source
1 $.jumboslider({
2   loop: true
3 });

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

view source
1 $.jumboslider({
2   autoplay: 3000
3 });

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

view source
1 $.jumboslider({
2   transition: 600
3 });

10. API methods.

view source
1 // go to the next slide
2 mySlider.slideNext();
3  
4 // go to the prev slide
5 mySlider.slidePrev();
6  
7 // go to a specific slide
8 mySlider.slideTo(5);

11. Event handlers.

view source
01 mySlider.on('onSlide', function(e, target) {
02   // do something
03 });
04  
05 mySlider.on('onArrowClick', function(e, target) {
06   // do something
07 });
08  
09 mySlider.on('onPaginationClick', function(e, target) {
10   // do something
11 });

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

source : jquery.net

Related posts: