More Demos: how to make slider in bootstrap, AI Website Builder, HTML slider, Slick carousel, Bootstrap carousel, HTML slideshow, CSS Slideshow, jQuery carousel, Image carousel
Q: I recently invested in the wowslider licence and am using it now and plan to make extensive use of it both in wordpress and normal pages and have found it generally easy to use and get working and am very happy with it.
Was just wondering if there is a way to have the images rotate randomly? Is this an option I am not seeing or looking too hard for and overlooking the obvious (which I find is often the case LOL)
If there is no current option to randomise image order (or even image effect), what is the likelihood of that eventuating in the near future? Or how hard would it be to hack it into this current version? I use a php script to randomise my headers previously, and have now replaced the headers with a nice slow fade effect using the slider, and would love for it to
cycle randomly through the image order.
A: To make random order for slides, open "script.js" file in any text editor (for example, Notepad) and add parameter "onBeforeStep":
onBeforeStep: function(curIdx,count){ return (curIdx+1 + Math.floor((count-1)*Math.random())) }
For example:
jQuery("#wowslider-container1").wowslider({effect:"fade",prev:"",next:"",duration:10*100,delay:21*100,outWidth:480,outHeight:360,width:480,height:360,autoPlay:true,stopOnHover:false,loop:false,bullets:true,caption:true,controls:true,onBeforeStep: function(curIdx,count){ return (curIdx+1 + Math.floor((count-1)*Math.random())) }});
To make random start for slides, open "script.js" file in any text editor (for
example,Notepad) and add parameter "startSlide":
startSlide:Math.round(Math.random()*99999)
For example:
jQuery("#wowslider-container1").wowslider({effect:"fade",prev:"",next:"",duration:10*100,delay:21*100,outWidth:480,outHeight:360,width:480,height:360,autoPlay:true,stopOnHover:false,loop:false,bullets:true,caption:true,controls:true,startSlide:Math.round(Math.random()*99999)});
Also, you can start your slideshow from a particular image. Use number of image that you
want to be start slide in this case. For example:
startSlide:2