Creación de presentaciones y carruseles jQuery en Drupal 7. Parte 2

En la parte anterior de la lección creamos un slideshow; en mi caso se trataba de mostrar empleados de una organización, pero tú puedes usar el banner como cabecera del sitio. Sin embargo, esta solución predeterminada no me convence del todo, me gustaría agregar botones personalizados para cambiar entre las diapositivas. Se ve más elegante que los controles de texto o números.

Recordemos que ya tenemos instalados los módulos Views y Views Slideshow.

Entonces, he adjuntado a este artículo varios tipos de flechas. Vamos a colocarlas en nuestro slideshow. Para empezar, hay que añadir los controles de texto para avanzar y retroceder en las diapositivas.

Así obtendremos los enlaces de "Next" y "Previous".

La idea para colocar los botones es asignar un fondo (background) con CSS a los enlaces "next" y "previous" y moverlos a la posición deseada mediante CSS.

Para facilitar el trabajo, utilizaremos la extensión FireBug para Firefox. Proporciona herramientas muy prácticas para trabajar con CSS. Así se ve el bloque de enlaces en FireBug:

Nos interesa el ID de los elementos, ya que los usaremos en el CSS. También necesitamos los archivos de imagen de las flechas. Deben copiarse a la carpeta images de tu tema.

Copiamos los archivos de flechas en la carpeta images de nuestro tema.

Ahora editamos el archivo style.css del tema y agregamos el siguiente código CSS, ajustando los valores según el diseño:

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

a es el elemento de enlace, y # indica que se está apuntando al ID del elemento.

CSS para la flecha "next":

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

Podemos ocultar el botón "pausa" por completo:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Los valores de padding y position se pueden ajustar con FireBug y luego guardarlos en style.css.

Así quedó mi configuración final de CSS:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

¡El banner está listo! En la siguiente parte de la lección crearemos una carrusel jQuery.