Descubre nuestros Web Maintenance Plans
  +34 644 672 289 ¿Website down?   Contact  4.7 / 5

Web 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

    ¿How can we help you?

    We are at your service, please write us a message, we'll get back to you quickly.





    Workcation

    Muy profesionales. Resuelven rápido e informan en todo momento del estado del trabajo. 100% recomendado.

    Conchetta Alonso

    CEO at Workcation

    4.7/5 Leer opiniones sobre Php Ninja en Google reviews

    ¿Cómo podemos ayudarte?

    Solicitar Presupuesto Contratar plan Contacto

    +34 644 672 289 (Lu-Vi, Whatsapp 24h)

    Resultados

    What have our clients said?

    • 5 star review  Fantástico, no puedo estar más satisfecho. Desde el momento uno, fueron muy atentos y resolvieron mi problema en el Hosting con gran profesionalidad. Muy recomendable. ¡Gracias chicos!

      thumb Carlos Rodríguez
      09/10/2020

      5 star review  Soy programador web y cuando me he visto en la posición de no poder realizar los trabajos debidos a su complejidad técnica o por falta de tiempo, he acudido a ellos. Los trabajos que me han entrado siempre han sido profesionales, de calidad y limpios. Sus precios valen la calidad que retornan. Si vuelvo a necesitarlo volveré a contactar ya que siempre he quedado más que satisfecho.

      thumb Nacho García
      10/09/2020

      5 star review  Buen trato, rapidez, eficacia…grandes profesionales!!. Veníamos de malas experiencias con supuestos expertos, que sólo nos hicieron perder dinero y tiempo. Y en cambio, ellos nos han realizado una limpieza de Malware en tiempo récord para las fechas que son. Desde luego, ha sido todo un acierto encontrar esta empresa tan seria y eficiente. Mención especial para Marc, por su excelente atención al cliente. Repetiremos y los recomendaremos. Saludos.

      thumb Clibema instaladores y lampistas
      27/12/2021
    • 5 star review  The service was fast and professional. Besides being very friendly. Thank you very much and I highly recommend it!

      thumb Carlos Aguilar
      08/03/2021

      5 star review  Soluciones rápidas y efectivas. ¡100% recomendable!

      thumb Jonatan Murcia
      19/10/2021

      5 star review  They made me some improvements in Prestashop very efficiently, maintaining contact at all times and with great professionalism and speed. We will work with them again.

      thumb Javier Benedit Salas
      11/11/2021

    Easy Slider 1.7 – Fade, Cross Fade Effect

    Te respondemos rápidamente. Sin compromiso

      Recibir asistencia
    Laura
    Available

    Php Ninja

    icono whatsapp programador web