(solucionado)Imagen de control deslizante

[pabloledesma]

Buenos días

 

En esta ocasión me inunda la siguiente duda:

 

Como puedo cambiar la transición de las imágenes de mi banner?

Me gustaría que la transición entre una imagen y otra sea únicamente de opacidad y no de desplazamiento como aparece en el tema por defecto.

 

De antemano les agradezco por su atenta ayuda

Edited June 1, 2013 by pabloledesma (see edit history)

[nadie]

Buenos días

 

En esta ocasión me inunda la siguiente duda:

 

Como puedo cambiar la transición de las imágenes de mi banner?

Me gustaría que la transición entre una imagen y otra sea únicamente de opacidad y no de desplazamiento como aparece en el tema por defecto.

 

De antemano les agradezco por su atenta ayuda

 

Ejemplo básico:

 

Fichero:

 

/modules/homeslider/js/homeslider.js

 

Busca esto:

 

$('#homeslider').bxSlider({
 infiniteLoop: homeslider_loop,
 hideControlOnEnd: true,
 pager: true,
 autoHover: true,
 auto: homeslider_loop,
 speed: homeslider_speed,
 pause: homeslider_pause,
 controls: false
});

 

y por ejemplo lo dejas así:

 

$('#homeslider').bxSlider({
 infiniteLoop: homeslider_loop,
 hideControlOnEnd: true,
 pager: true,
  mode: 'fade',
 autoHover: true,
 auto: homeslider_loop,
 speed: homeslider_speed,
 pause: homeslider_pause,
 controls: false
});

 

Como ves... hemos agregado esto:

 

  mode: 'fade',

[nadie]

Por cierto, recuerda que depende editar directamente el fichero:

 

/modules/homeslider/js/homeslider.js

 

Se recomienda hacer una copia de dicho fichero, en:

 

/themes/tu-plantilla/js/modules/homeslider/js/ (Creando dicha estructura de directorios, en caso de no los tengas)

 

(Y editar este ultimo)

[nadie]

Por cierto, creo que cuando lo colocabas a "fade" el efecto (tal como te he comentado anteriormente), los botones para cambiar imagen en el slider, desaparecian "entre comillas", para solventar esto, en el fichero:

 

modules/homeslider/bx_styles.css

 

Busca esto:

 

.bx-pager {
  position: absolute;
  bottom: 20px;
bottom:40px !ie;/* hack ie7 */
right: 15px;
padding-top: 7px;
font-size:11px;
color:#666;
text-align:center;
}

 

Y dejalo así:

 

.bx-pager {
  position: absolute;
  bottom: 20px;
bottom:40px !ie;/* hack ie7 */
right: 15px;
padding-top: 7px;
font-size:11px;
color:#666;
text-align:center;
z-index: 100;
}

[pabloledesma]

Wow!! excelente solución!!!

Con esto matamos 2 pájaros de un solo tiro pues la transición anterior tenia problemas con chrome; las imágenes no terminaban su desplazamiento y siempre había un desface. Esto se veía muy mal !!! paro gracias al Buen Víctor esto ya no me perturbara más.

 

Que otros tipos de transición hay?

 

PD: ya he puesto tema solucionado

Edited June 1, 2013 by pabloledesma (see edit history)

[nadie]

Wow!! excelente solución!!!

Con esto matamos 2 pájaros de un solo tiro pues la transición anterior tenia problemas con chrome; las imágenes no terminaban su desplazamiento y siempre había un desface. Esto se veía muy mal !!! paro gracias al Buen Víctor esto ya no me perturbara más.

 

Que otros tipos de transición hay?

 

PD: ya he puesto tema solucionado

 

Un placer ayudarte y servirte!

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

 

PD: Pues hay mas tipos de transición "vertical, horizontal (que es el que va por defecto), fade (que es el que has puesto ahora)" (Mas info en: http://bxslider.com/options )

 

A mi el efecto horizontal que lleva por defecto, me funciona bien..