Fluid-responsive jQuery image slider. Blueberry

0

With the popularity of smart phones and tablet devices responsive/fluid web layouts have become an important part of modern web design. Blueberry is a basic plugin with the aim of making it suitable for responsive web design. It’s an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Fluid-responsive jQuery image slider. Blueberry

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
    and style that instead.


Markup. jQuery

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

Markup. 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>
<!-- Optional, see options below -->
  <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>
<!-- Optional, see options below -->
</div>

Known issues

  • Transition timing can become out of sync, appears to be caused by 'pause on hover' which has been disabled by default.
  • Two or more sliders on a single page don't appear to function correctly, appears to be timer related.

View Demo Blueberry
Download Blueberry

SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here