Demonstration

• Default
  
  
  Show usage

  $('.slider').miniSlider();

• Basic configuration
  
  
  Show usage

  $('#slider').miniSlider({
    pauseOnHover: true, 
    showNavigation: false, 
    showPagination: false,  
    delay: 500, 
    transitionSpeed: 4000
  });

Basic Usage

Basic HTML

<div class="slider">
  <p> some text </p>
  <p> some text </p>
  <p> some text </p>
</div>

Basic CSS

.slider-container, .slider {
  width: 300px;
  height: 100px;
}

Basic Initialization

$(function() {
  $('.slider').miniSlider();
});

Options

• autoPlay (boolean)
  Autoplay slides on load.
  Default value is true Show example

  $('#slider').miniSlider({
    autoPlay: false
  });
  

• delay (integer)
  Delay between slides in milliseconds.
  Default value is 3000 Show example

  $('#slider').miniSlider({
    delay: 1000
  });

• containerClass (string)
  Slider container CSS class name.
  Default value is 'slider-container' Show example

  $('#slider').miniSlider({
    containerClass: 'your-container-class-name'
  });
  

• currentClass (string)
  Current slide CSS class name.
  Default value is 'current' Show example

  $('#slider').miniSlider({
    currentClass: 'cur'
  });
  

• previousClass (string)
  Previous slide CSS class name.
  Default value is 'previous' Show example

  $('#slider').miniSlider({
    previousClass: 'prev'
  });
  

• nextClass (string)
  Next slide CSS class name.
  Default value is 'next' Show example

  $('#slider').miniSlider({
    nextClass: 'next'
  });

• transitionSpeed (integer)
  Transition speed between slides in milliseconds.
  Default value is 500 Show example

  $('#slider').miniSlider({
    transitionSpeed: 700
  });

• transitionEasing (string)
  Easing animation for the slides transition.
  Default value is 'swing' Show example

  $('#slider').miniSlider({
    transitionEasing: 'easeInOutQuad'
  });

• pauseOnHover (boolean)
  Pause slider animation on mouse over.
  Default value is false Show example

  $('#slider').miniSlider({
    pauseOnHover: true
  });

• showNavigation (boolean)
  Show next / previous buttons.
  Default value is true Show example

  $('#slider').miniSlider({
    showNavigation: false
  });

• previousBtnClass (string)
  Previous button CSS class.
  Default value is 'previousBtn' Show example

  $('#slider').miniSlider({
    previousBtnClass: 'prev'
  });

• nextBtnClass (string)
  Next button CSS class.
  Default value is 'nextBtn' Show example

  $('#slider').miniSlider({
    nextBtnClass: 'next'
  });

• previousBtnContent (string)
  Previous button HTML content.
  Default value is '&lsaquo' (arrow) Show example

  $('#slider').miniSlider({
    previousBtnContent: 'previous'
  });

• nextBtnContent (string)
  Next button HTML content.
  Default value is '&rsaquo' (arrow) Show example

  $('#slider').miniSlider({
    nextBtnContent: 'next'
  });
  

• showPagination (boolean)
  Show slider pagination.
  Default value is true Show example

  $('#slider').miniSlider({
    showPagination: false
  });

• paginationClass (string)
  Pagination wrapper class.
  Default value is 'pagination' Show example

  $('#slider').miniSlider({
    paginationClass: 'paginate'
  });

• currentPaginationClass (string)
  Current pagination list item CSS class.
  Default value is 'currentPagination' Show example

  $('#slider').miniSlider({
    currentPaginationClass: 'current'
  });

• onLoad (function)
  Called when slider is loading.
  Default value is empty Show example

  $('#slider').miniSlider({
    onLoad: function() {
      // Do what you want
    }
  });

• onReady (function)
  Called when slider is ready.
  Default value is empty Show example

  $('#slider').miniSlider({
    onReady: function() {
      // Do what you want
    }
  });

• onTransition (function)
  Called when it's changing slides.
  Default value is empty Show example

  $('#slider').miniSlider({
    onTransition: function(slide, number) {
      // Do what you want
    }
  });

• onComplete (function)
  Called when the slide transition is complete.
  Default value is empty Show example

  $('#slider').miniSlider({
    onComplete: function(slide, number) {
      // Do what you want
    }
  });

Connect

About

Matthieu Aussaguel

I am a Web Developer currently working at Envato as part of the Marketplace dev team in Melbourne, Australia. I focus mostly on Ruby/Rails technologies but I also enjoy coding in CoffeeScript in my spare time. Head over to my personal website and my Github page for more info about me.

Follow @mattaussaguel