Front & Back Development

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;
overflow:hidden;}
#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);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ 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);
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
adjust();
});

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
"Full stack" web developer focused in maintenance and bug fixing.Wordpress, Prestashop, HTML, CSS, Javascript, Php and Mysql. Also open source collaborator. Linkedin y Twitter.


Leave your email & we'll contact you
Get business from your website, not headaches. Leave your email and we'll contact you

1
Hi! 👋If you have any doubt, click here so we can talk directly on WhatsApp.
Powered by