BalfSlider

A bit about BalfSlider...

Welcome to the page on BalfSlider.

You can enjoy this slider from my website at no cost.

Many of the jQuery sliders out there are either very heavy in terms of code (JavaScript) or are too heavy in terms of styles (CSS). On top of that, a lot of them lack any customisation.

BalfSlider aims to improve that!

I decided on the 13th of October 2016 down to the fact I had no major new projects in the last year it was time to begin a new one. Within hours of development, the core of BalfSlider was complete.

Getting started

It's so easy to get started with BalfSlider as it is a jQuery plugin.

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>
...

On the subject of stylesheets, 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.

Crucially, parts of the CSS can modified to suit your website, just by modifying the SCSS.

I think defering until the document is ready is the best way to load BalfSlider, as it will show the first slide indefinitely until you are ready for the slideshow to begin. Continuing in the head element, open a new script and put the following code in it:

JavaScript 
$(document).ready(function(){
    $("#menu").BalfSlider();
});

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

BalfSlider focuses on a object-oriented 'model' interface. This means that it's so easy to develop custom transitions for BalfSlider as a result.

.