


Welcome to the page on BalfSlider.
BalfSlider is a very lightweight and functional image slideshow. It will feature a range of different transition styles (coming soon) and currently contains a single style that's easy to use.
I decided on the 12th of October 2016 to begin my next major project in my Web Neutral Project. In 2018 I released the third major version of BalfSlider, relying on a placeholder image to define the width of the slider.
As with BalfBar and BalfRibbon, BalfSlider is a jQuery plugin. This makes it easy to setup and use.
First ensure you have jQuery 1.10 or later and a copy of the stylesheet:
... <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:
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.
Now create the slider:
<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:
$(document).ready(function(){ $("#images").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.
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.
$(document).ready(function(){ $("#images").BalfSlider({SlideDuration : 2000, TransitionDuration : 500}); });
As you can imagine, this will mean that each slide is up for 2000 milliseconds and then it switches to the next slide across 500 milliseconds.
The following frame demonstrates some different modes which you can configure using the selector below:
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.
BalfSlider is, as with all of my projects in my Web Neutral 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.
Generate your own BalfSlider using this plugin creator (I will add more of these from time to time as they become available):
![]() | Happy New Year everyone! #2021NewYear 21 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 21 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 21 days ago |
There are no comments on this page.