Easy Slider 1.7 – Fade, Cross Fade Effect

Fade effect for Easy Slider 1.7

This is a “patch” usefull but a patch.  Just comment  some lines and add few lines.
I recommend you follow these steps, drop me a comment if you need help.

Modification of jQuery Plugin Easy Slider 1.7, By CSS GLOBE, to use fade effect between transitions.

1) Add this CSS
#slider ul{ position: relative; }
#slider li{position:absolute;top:0;left:0;z-index:8;width:653px;height:341px;
#slider li.active {z-index:10;}
#slider li.last-active {z-index:9;}

2) Open EasySlider1.7.js
Go to line #131. Comment these lines. All of them or just 132 and 134.

#131 if(!options.vertical) {
#132 // $("ul",obj).css("margin-left",(t*w*-1));
#133 } else {
#134 // $("ul",obj).css("margin-left",(t*h*-1));
#135 }

3) Comment from line #163
if(!options.vertical) {
p = (t*w*-1);
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
} else {
p = (t*h*-1);
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }

4) After, Add this:
Here is the fade effect. Adjust Speed and duration as you want.

var $active = $('ul li.active',obj);
if ( $active.length == 0 ) $active = $('ul li:first',obj);
var $next = $active.next().length ? $active.next() : $('li:first',obj);
$next.css({opacity: 0.0})
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');

Finished) After the last piece comes …
if(!options.continuous && options.controlsFade){ …..

That’s all folks!

Thanks to Jon Raasch for his example http://jonraasch.com/blog/a-simple-jquery-slideshow

Beto López
Software engineer & Full stack website developer who has left a startup job where wednesdays were "yoga days", to build an standarized-low-cost technical support service, deepest than than the service hosting companies provide, for website owners, freelancers and digital businesses. Personal Website, Linkedin y Twitter.

Easy Slider 1.7 – Fade, Cross Fade Effect
We are always online, we reply fast
Get in touch
Do NOT follow this link or you will be banned from the site!
Php Ninja
icono whatsapp programador web