Flexible jQuery Infinite Content Slider Plugin - PlusSlider

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.