jQuery minislider

jQuery minislider is a very simple and very tiny slider that requires a minimum setup (2 CSS rules). I wrote this yet-another-jquery-slider because I really needed a simple slider that did just what I need, without rocket science features, indeed, jQuery minislider can be used as base to a more featured slider, if you can code it. Its weight is only 1948 bytes, less than 2Kb!

The basic features are:

  • Control arrows (to move back and forward)
  • Monitor (to know the current index)
  • Slideshow
  • Infinite loop

the advanced ones are:

 

How to use it

Include jQuery and jQuery minislider in your page:

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.minislider.js" type="text/javascript"></script>

decide and write in your CSS the size of the slider:

.minislider {
    width:300px;
    height:300px;
}

and then put your sliding items in an HTML element:

<div class="minislider">
  <img src="1.jpg" /> 
  <img src="2.jpg" /> 
  <img src="3.jpg" /> 
  <img src="4.jpg" />
</div>

if you want to use control arrows and monitor add them:

<a class="prev" href="#">←</a>
<div class="monitor"></div>
<p><a class="next" href="#">→</a>

and finally you can call minislider:

$(function () {
	$(".minislider").minislider()
});

Options

Name Default value Description
slideshow true Slideshow mode, it automatically changes slide
pause 4000 only if slideshow is true: milliseconds between automatic slidings
duration 1000 duration of the slide animation
loop true enables infinite loop
easing null Easing of the sliding animation, it requires jQuery easing plugin
next ".next" Selector, HTML node or jQuery element to forward sliding
prev ".prev" Selector, HTML node or jQuery element to back sliding
monitor null Selector, HTML node or jQuery element of the monitor

Demo

You can see a demo here.

Download

If you like it, grab it here.

License

Beerware

Leave a Reply