Fluid-responsive jQuery image slider. Blueberry

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.

    View Demo Blueberry
    Download Blueberry