Blueberry image slider

Blueberry image slider is an experimental open source jQuery image slider plugin which was been written specifically to work with fluid/responsive web layouts.

How to use Blueberry

• By default the slider will assume the width of it's parent element, this can be tweaked with CSS min/max-width.
• All images should be of equal dimensions. The slider will assume the height & width of the first image.
• The blueberry function must be called inside $(window).load() to avoid a bug in webkit browsers (see markup below).
• Don't forget to include the blueberry.css style sheet. This sets the base styles that are required for the slider to work.
• You can add the .crop class too the ul.slides element to crop the images rather than resizing them, try it!
• When themeing avoid applying any padding or margin to the ul.slides element. The safest option is to wrap it in another <div> and style that instead.

Markup

jquery:

$(window).load(function() {
 $('.blueberry').blueberry();
});

html:

<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
  <ul class="pager">
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>

very simple this plugins Blueberry image slider