Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

BalfSliderA simple and responsive slideshow with many different animations

BalfSliderA simple and responsive slideshow with many different animations
BalfSlider
BalfSlider
Setup difficulty: easy

Welcome to the page on BalfSlider.

BalfSlider is a very lightweight and functional image slideshow. It features a range of different effects and there are more coming all the time. BalfSlider version 2.0 was released on May 30th 2021 and is much easier to use that previous versions.

I decided on the 12th of October 2016 to begin my next major project in my Web Independently Styled Project. In 2018 I released the third major version of BalfSlider, relying on a placeholder image to define the width of the slider.

Placeholder
Bunny
Bunny
Bunny

    Getting started

    As with BalfBar and BalfRibbon, BalfSlider is a jQuery based library. It does not extend jQuery but returns a BalfSlider object.

    First ensure you have jQuery 1.10 or later and a copy of the stylesheet:

    HTML
    ...
    <head>
        ...
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <link href="balfslider.css" rel="stylesheet" type="text/css">
        ...
    </head>
    ...
    					

    I provide a compiled version of the style used on this sample page and indeed the one on my personal website, but you most likely want to compile the SCSS file so that it works better with your website.

    There are several notes to make on the slideshow:

    • When the slideshow is loading it sometimes looks out of place. I suggest adding a display : none property to the slideshow. BalfSlider will automatically set it to a block element when it is ready. This means that users do not see a mess whilst it loads. The other option is to make the placeholder visibile and have a loading animated GIF in the middle of it.
    • The height should not be modified unless you are not using the aspect ratio tools. BalfSlider will handle this otherwise using the placeholder image.

    Now create the slider:

    HTML
    <div id="images" class="balfslider">
      <div class="slides">
        <img class="slide" src="slide1.jpg" alt="slide1"/>
        <img class="slide" src="slide2.jpg" alt="slide2"/>
        <img class="slide" src="slide3.jpg" alt="slide3"/>
      </div>
      <img class="placeholder" src="placeholder.jpg" alt="Slideshow loading"/>
      <ul class="selectors"></ul>
    </div>
    					

    I think defering until the document is ready is the best way to load BalfSlider, but that choice is yours. Continuing in the head element, open a new script and put the following code in it:

    JavaScript
    $(document).ready(function(){
      var current_balfslider = new BalfSlider($(".balfslider .slides"), 3000, 2000, new BalfSliderAnimations().fall());
      current_balfslider.Start();
    });
    					

    As you can imagine, this will mean that each slide is displayed (including the transition effect) for 3000 milliseconds and then it switches to the next slide over a duration of 2000 milliseconds. This means the slide will displayed for just 1000 milliseconds (3000 - 2000);

    Functions are bound within the plugin to specific events which will trigger automagically. There is no need for you to change any of this.

    Although this is designed as an image slideshow, anything can be used. I use div elements with images and captions inside, but you can do whatever you like.

    Modes

    The following frame demonstrates some different modes which you can configure using the selector below:

    To prevent excess JavaScript processor time and wastage of resources, BalfSlider only changes the slide when the window has focus. As a result, the iFrame above will need to have focus for the slides to change.

    Aspect ratio

    BalfSlider takes advantage of the fact that the image element maintains aspect ratio and always has. You need to define a placeholder image that has the same aspect ratio as the slider.

    This not only keeps images the right size but also allows BalfSlider to become responsive - something many sliders do not feature.

    License

    BalfSlider is, as with all of my projects in my Web Independently Styled Project, free to use. The source code is available on request, but by default, the file included is minified but non-minified source code can be given on request (I cannot be bothered updating my website with the latest each time). You can download a non-minified custom one from the generator on this webpage.

    Effects generator

    Generate your own BalfSlider using this plugin creator (I will add more of these from time to time as they become available):

    BalfSlider generator

    Before generating a slider, you should test each effect in the Modes section on this page.

    Generate CSS
    Comments