Flexible jQuery Infinite Content Slider Plugin - PlusSlider
File Size: | 751 KB |
---|---|
Views Total: | 2716 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PlusSlider is a fast and easy-to-use jQuery plugin that turns a group of html elements into a fully configurable and flexible slider. The html elements can be text or DIVs, not only images.
Main features:
- Flexible and Adaptive
- Dots and arrows navigation
- Supports infinite slide, auto play and full screen
- Multiple instances on one page
- Smooth transitions: sliding and fading
- API and callback events supported
- Cross-browser: IE6+, Chrome, Firefox, Safari, Opera, etc
- jQuery easing supported
Basic Usage:
1. Load the latest jQuery library from google CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Include jQuery PlusSlider Plugin on the page
<link rel="stylesheet" type="text/css" href="css/plusslider.css" /> <script type="text/javascript" src='js/jquery.plusslider.js'></script>
3. Include jQuery easing plugin on the page (optional)
<script type="text/javascript" src='js/jquery.easing.1.3.js'></script>
4. Create a group of images
<div id="demo"> <a href="#"><img src="images/image1.jpg" alt="" height="" width="" /></a> <a href="#"><img src="images/image2.jpg" alt="" height="" width="" /></a> <a href="#"><img src="images/image3.jpg" alt="" height="" width="" /></a> ... </div>
5. Call the plugin with options
<script type="text/javascript"> $(document).ready(function(){ $('#demo').plusSlider({ autoPlay: false, displayTime: 2000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true' sliderType: 'fader', // Choose whether the carousel is a 'slider' or a 'fader' width: 500, // Overide the default CSS width height: 250, // Overide the default CSS width sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin }); }); </script>
6. All the options
$('#slider').plusSlider({ /* General */ sliderType : 'slider', // Choose whether the carousel is a 'slider' or a 'fader' infiniteSlide : true, // Gives the effect that the slider doesn't ever "repeat" and just continues forever disableLoop : false, // Disables prev or next buttons if they are on the first or last slider respectively. 'first' only disables the previous button, 'last' disables the next and 'both' disables both fullWidth : false, // sets the width of the slider to 100% of the parent container /* Display related */ defaultSlide : 0, // Sets the default starting slide - Number based on item index displayTime : 4000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true' sliderEasing : 'linear', // Anything other than 'linear' and 'swing' requires the easing plugin speed : 500, // The amount of time it takes for a slide to fade into another slide /* Functioanlity related */ autoPlay : true, // Creats a times, looped 'slide-show' keyboardNavigation : true, // The keyboard's directional left and right arrows function as next and previous buttons pauseOnHover : true, // AutoPlay does not continue ifsomeone hovers over Plus Slider. /* Arrow related */ createArrows : true, // Creates forward and backward navigation arrowsPosition : 'prepend', //Where to insert arrows in relation to the slider ('before', 'prepend', 'append', or 'after') nextText : 'Next', // Adds text to the 'next' trigger prevText : 'Previous', // Adds text to the 'prev' trigger /* Pagination related */ createPagination : true, // Creates Numbered pagination paginationPosition : 'append', // Where to insert pagination in relation to the slider element ('before', 'prepend', 'append', or 'after') paginationWidth : false, // Automatically gives the pagination a dynamic width /* Callbacks */ onInit : null, // Callback function: On slider initialize onSlide : null, // Callback function: As the slide starts to animate afterSlide : null, // Callback function: As the slide completes the animation onSlideEnd : null // Callback function: Once the slider reaches the last slide });
Change logs:
v1.5.16 (2015-08-07)
- update
v1.5.14 (2015-08-05)
- update
v1.5.13 (2014-03-28)
- update
v1.5.10 (2014-03-12)
- update
v1.5.5 (2014-03-08)
- fullWidth option was integrated into the plugin by default
- SCSS replaced CSS
- Grunt built into project for easy js/css deployment/version number updating
- All elements have been converted to divs
- Code optimization
This awesome jQuery plugin is developed by JamyGolden. For more Advanced Usages, please check the demo page or visit the official website.