More Demos: slider bootstrap responsive, AI Website Builder, HTML slider, Slick carousel, Bootstrap carousel, HTML slideshow, CSS Slideshow, jQuery carousel, Image carousel
Q: I recently came across your <keyw id=0/> and loved the "Blast" effect. So i downloaded it and i'm trying to integrate it in my site. is in development mode so i'm taking my time.
What i try to do (and this is why i send you this email) is having .png slides. Actually i am trying to keep a background (same background) for all sliders.
The thing is i can't have the background smashed into pieces for every slide (thus the .png sliders).
So what i thought i should do is modify the script.js so that as soon as a slider is smashed into pieces, the image (that was smashed) disappears. That way when the new pieces come to position, and the new slider is assembled it doesn't show the previous image. (image that disappears as soon as the second slide completed assembling.) That make sense?!
With .jpeg this is not needed as all the slides have they'r own background. But with .png and only a background (like, behind the slider), the effect is not eye pleasing.
Well i look into script.js and although i am familiar with jQuery and web development languages, i can't seem to find the right approach.
I found the ws_blast() function and mess with it, but can't figured out what to do to "display: none" the image that starts the animation. (or something like this)
I would much appreciate if you guys could explain this or point me in the right direction.
A: Actually, wowslider app. generates .jpg images only.
But you can change them on .png images manually.
1) Upload your .png images to data/images folder
2) Change image format in generated .html code. For example:
...
<span><img src="data1/images/image1.jpg" alt="" title="" id="wows1"/></span>
...
Then you should open your "script.js" file in any text editor (for example, NotePad), find last line and add to add "fadeOut:1" parameter. For example:
jQuery("#wowslider-container1").wowslider({effect:"basic_linear",prev:"",next:"",duration:68*100,delay:33*100,width:640,height:360,autoPlay:true,stopOnHover:false,loop:false,bullets:0,caption:false,captionEffect:"slide",controls:false,onBeforeStep:0,images:0,revers:1,fadeOut:1});