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.
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 decoding="async" src="img/slide1.jpg" /></li> <li><img decoding="async" src="img/slide2.jpg" /></li> <li><img decoding="async" src="img/slide3.jpg" /></li> <li><img decoding="async" 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.