Responsive Content Slider jQuery SliderPlex - Download Minimal Responsive Content Slider Plugin - jQuery SliderPlex

Download Minimal Responsive Content Slider Plugin – jQuery SliderPlex

Posted on

This time I will share jQuery Plugin and tutorial about Minimal Responsive Content Slider Plugin – jQuery SliderPlex, hope it will help you in programming stack.

Responsive Content Slider jQuery SliderPlex - Download Minimal Responsive Content Slider Plugin - jQuery SliderPlex

File Size: 19.3 KB
Views Total: 2306
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SliderPlex is a simple, responsive jQuery content slider/carousel plugin that features auto rotation, pause on hover, navigation arrows, CSS3 animations and much more.

How to use it:

1. Make sure both the jQuery and jQuery SliderPlex plugin’s files are included.

1 <link rel="stylesheet" href="SliderPlex.min.css">
2 <script src="jquery.min.js"></script>
3 <script src="SliderPlex.js"></script>

2. Create an html list of html contents for the slider.

01 <div class="slider slider-plex">
02   <ul>
03       <li>
04           <img src="0.jpg">
05       </li>
06       <li>
07           <img src="1.jpg">
08       </li>
09       <li>
10           <img src="2.jpg">
11       </li>
12       ...
13   </ul>
14 </div>

3. Initialize the responsive slider with default options.

1 $('.slider').SliderPlex();

4. Possible plugin options to customize the slider.

01 $('.slider').SliderPlex({
02  
03   // in seconds
04   interval: 8,
05  
06   // enable auto play
07   autoPlay: true,
08  
09   // or 'slide', 'zoom'
10   transition: 'fade',
11  
12   // in seconds
13   transitionTime: .5,
14  
15   // false = left
16   direction: 'right',
17  
18   // enables navigation arrows
19   arrows: true,
20   nonFocusArrows: false,
21  
22   // auto pause
23   pauseOnMouseOver: false,
24   pauseOnMouseDown: true,
25  
26   // fill container's space
27   fillSpace: false
28    
29 });

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

source : jqueryscript.net