CYBERHOLIC

Blogging and Design since 1999

Thursday, 24 December 2015 10:09

BXSLIDER individual slides duration

Written by
Rate this item
(0 votes)
I have been working on a relaunch of my SEEMIYAH project for the last weeks and now reached the point where i have to script the part of the sliding fullscreen widgets. For this i count on the beautiful BX Slider offered by bxCreative. As my intention of the SEEMIYAH project back in 2007 was to have the screensaver-like widgets on any device, i never thought about mobile touch-enabled display. Thus, at that time and also at this very moment, the bxSlider might be a bit too heavy for what i need, but it gives me the possibility to add easily several astonishing features in the future.

The only thing that this slider solution lacks of, is that there is no easy peasy solution to add individual pause durations per slide content. I found several solutions on the net, but most of them wanted you do change the plugin code, what ends up in a mess once that the plugin will be updated and you might have to rewrite everything again or implement your code in a more complicated way. So here is my workflow and my solution!

TARGET

I want each slide to have its individual duration. And i want these values not be in an array but as HTML data-attribute inside the slide tag.

SITUATION

What i have at this very moment are four images that changed at the same time because i set up the PAUSE function inside the bxSlider element to 4000. This means that every image waits for 4 seconds and then moves on to the next slide. The first thing i do is add the data-duration attribute per slide DIV element with the amount of time i want. This is the result:
<div id="bxslider">
<div id="slide1" class="slideItem" data-duration="3000"><img src="/image1.jpg"></div>
<div id="slide2" class="slideItem" data-duration="6000"><img src="/image2.jpg"></div>
<div id="slide3" class="slideItem" data-duration="2000"><img src="/image3.jpg"></div>
<div id="slide4" class="slideItem" data-duration="19000"><img src="/image4.jpg"></div>
</div>


THE SLIDER SET UP

The next step is to implement the bxSlider inside a script to define the plugin. This is how you should start and check if it runs (obviously after implementing the JS scripts etc. that i do not mention in here because i think that you learned how to do this (the documentation of the bxSlider is awesome - so you better RTFM!)).


    slider = $('#bxslider').bxSlider({
       auto: false,
       pause: 3000,
       infiniteLoop: true, //! This is very important
       autoStart: false
    });
    slider.startAuto();
Here i am telling bxSlider that it should not autoStart, thus pause is set up to 3 seconds. The slider also has the var name "slider" so that i can control and call it outside of the script, as i do so by saying slider.startAuto();. Let's take a small remind rewinder!

1. You download bxSlider and upload it to your server.
2. You create a very minimal example page with the basics of the slider.
3. Check that everything works out.
4. Add the three options to your slider (if you haven't done so before).
5. Check if everything works as it should.

THE SOLUTION

So what we have by now is a slider where every slide has its own individual ID and a data-attribute called data-duration showing the amount of time we want each slide to stay. Now you are going to add this code to your bxSlider after all the other variables to set up the slider.

onSlideAfter: function(){
 slider.stopAuto(); 
 var current = slider.getCurrentSlide();
 var curDataDuration = $('#slide'+current).data("duration");
 sliderWaiting = setTimeout(function(){
  slider.goToNextSlide();
 }, curDataDuration);
}
Now let's go through this part of code line by line. Please bare with me as i am not such a Javascript expert - if anyone can recode these lines to optimize them it would be perfect! I just think that this way they might be easiert to understand.

With the onSlideAfter function we tell bxSlider to do something everytime a slide has finished appearing.
The first thing we tell bxSlider with slider.stopAuto() is that we want the auto play function to stop.
thanks to slider.getCurrentSlide() we get the number of the actual slide item and put it into a variable called "current".
On the next line we set the variable curDataDuration that gets the data-attribute that we set up inside the slide HTML code. It is set up like from the element with the id slide1 get the data attribute called duration.
Then we set up a timeout function that will execute every x (curDataDuration taken from above) seconds and then thanks go slide.goToNextSlide() will go to the next slide. For this to work, it is important that your slides are set up as infiniteLoop - otherwise you must code a script checking if it is the last slide of your collection and if so, set the next slide to be the first one. But hey: first try to work with my code and from there are no borders.


Go get the bxSlider plugin at http://bxslider.com
Read 340 times Last modified on Thursday, 24 December 2015 10:46
Qroft

I started blogging in October 2000 and moved on offering my knowledge to small and not so small companies in terms of design and programming. Though i would never consider me a designer nor a programmer. More a pixel prostitute and scriptkid.

Login to post comments
 

Portfolio

Download my PDF portfolio in a low density quality by clicking the button below.

DOWNLOAD

carlos pinto portfolio header

Stickers & Qrofties

I produce and sell stickers and so called "Qrofties" (transparent paper prints at the size of a business card) for IKEA mashups, bookmarkers, scrapbooking and much more.
VISIT

QR Paintings

For half a decade i have been painting QR codes out there on the street and on canvas in acrilic.
VISIT

MR. ROBOT Wallpaper Generator

For the MR. Robot TV series i created an online wallpaper generator that allows you to create your own fanart wallpaper at 1920x1080pixels in Full HD for your computer desktop.
CREATE A WALLPAPER

La Despedida

A roadmovie in form of a documentary that i produced in 2010, about a journey on an italian three-wheeler through Europe to find out how hard it is nowadays to say "Goodbye". The full movie is available online.
VISIT

My Nathan Hunt game

For the first time ever, Google Streetview is used as content for a textadventure (also known as interactive fiction) game. I developed and published the first chapter in summer 2015, that can be playe online and for free.
PLAY THE GAME

Soundcloud love

  • Gorillaz - Ascension (Feat. Vince Staples) (Nic Fanciulli Remix)
     

Movie wishlist

Onlinetools

Programming

GFX

Audio

Latest job

Seriously.

Random job

My Amazon wishlist

Titanic Zufalls Fachmann

  • Stehendes Recht.
    Ich vertrete die Ansicht, daß eine Pflicht, die man anderen gegenüber nur widerwillig erfüllt, eigenmächtig durch ein Recht kompensiert werden darf: Seit ich in unserer WG im Sitzen pinkeln muß, kacke ich daher im Stehen.Thorsten Mausehund

remember the .GIF

As DJ Qroft i programmed a script in HTML and JS that selects randomly one out of thousands of GIF animations and creates a music video based upon these animations.
VISIT WWW.REMEMBERTHEGIF.COM