PlusSlider

PlusSlider

A content slider that simply works...
The right way





I do not fear death,
in view of the fact that I had been dead
for billions and billions of years
before I was born, and had not suffered
the slightest inconvenience from it.
- Mark Twain
The difference between the right word
and the almost right word is the difference
between lightning and a lightning bug.
- Mark Twain
Nature knows no indecencies;
man invents them.
- Mark Twain

Features

  • Slides are HTML (Can be images or text)
  • Easily swap between fading & sliding
  • Multiple PlusSliders per page
  • Very simple & valid markup
  • Autoplay (Optional)
  • Next/Previous Navigation (Optional)
  • Titled or numbered paginated navigation (Optional)
  • Callback available after each slide
  • Supports slides of various width and height
  • Tested on IE7+ and modern browsers

Default Options

$('#slider').plusSlider({

        /* General */
        sliderType: 'slider', // Choose whether the carousel is a 'slider' or a 'fader'
        width: false, // Overide the default CSS width
        height: false, // Overide the default CSS width

        /* 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
            nextText: 'Next', // Adds text to the 'next' trigger
            prevText: 'Previous', // Adds text to the 'prev' trigger

            /* Pagination related */
            createPagination: true, // Creates Numbered pagination
            paginationPosition: 'prepend', // Place the pagination above the slider within the HTML
            paginationWidth: false, // Automatically gives the pagination a dynamic width
            paginationTitle: false, // Checks for attribute 'data-title' on each slide and names the pagination accordingly

        /* Callbacks */
        onSlide: null // Callback function

    });

Changelog

Version 1.4

  • Added slider support for dynamic width and height
  • Streamlined the script
  • Removed the paginationThumbnails option
  • Set the paginationWidth to default to false
  • Changed the title of the option autoPlay to autoPlay
  • Added defaultSlide option
  • Added comments throughout the jquery.plusslider.js file as well as made it more human-readable
  • Changed a couple of element types and class names
  • Added .plusslide-container class to the .child parent

Version 1.3

  • Added nextText and prevText options
  • Added the paginationThumbnails option
  • Added the nextSlide() functionality to toSlide()
  • Removed the nextSlide() function - Redundant

Version 1.2.6

  • Added a paginationTitle
  • Plugin optimization
  • Added a minimal style option for easier CSS customization - jordanlev
  • Added callback function - jordanlev
  • Added toSlide() function - jordanlev

Version 1.2

  • Added option to place pagination before the slides
  • Fixed a bug where PlusSlider wouldn't fade when display was set to none
  • Removed version number from all file names

Version 1.1

  • Added support for multiple sliders per page
  • Added a width & height option

Version 1

  • First official version