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 393 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
  • Gorillaz - Ascension (Feat. Vince Staples) (Nic Fanciulli Remix)
     

Portfolio PDF

cards-portfolio-header.jpg

Latest job

Random job

QR paintings

project-qroft-paintings.jpg

My products

project-qroft-prints.jpg

My Amazon wishlist

remember the .GIF

Titanic Zufalls Fachmann

  • Karriere.
    Letzte Nacht schwer gefeiert. Morgens ein Blick in den Spiegel: Wenn ich beim nächsten Casting für »Körperwelten« mitmache, kriege ich dreimal »Ja« von der Jury und komme in den Recall.Ulf Wentzien

Imprint

Cyberholic
c/o Carlos Pinto
Av. Francisco Vega Monroy 11 P1C
35109 El Tablero, España

Haciendea San Bartolomé de Tirajana
NIE Y2632816C

carlos@cyberholic.es
+34 626 98 2112
+49 40 226 11399

Mindfaps

Interior Design

Movie wishlist

Seriously.

© 2017 Carlos Pinto, Cyberholic. All Rights Reserved.

Please publish modules in offcanvas position.