15. Tutorial: crear un "slideshow"

-

Crear un "slideshow" sencillo con código

Es relativamente sencillo crear un "slideshow" si encontramos un buen código :).

Es probable que no entendamos todo el código que estamos pegando, pero hay veces que nos puede convenir utilizar código que incluso no entendemos, por ejemplo por falta de tiempo.

Si buscamos en Google "javascript slideshow", el primer resultado que nos aparece es la siguente página de w3schools:

https://www.w3schools.com/howto/howto_js_slideshow.asp

Como se puede apreciar en 3 sencillos pasos (steps) se puede crear un "slideshow" sencillo. Aquí abajo los vamos a reproducir con algo más de detalle:

1. Creamos la estructura básica de un documento HTML:

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

2. En el interior de las etiquetas <body></body> añadimos el código que aparece en el "Step 1" de la página de w3schools. En dicho código aparecen etiquetas <img> que hacen referencia a imágenes. Será necesario cambiar los valores de los atributos "src" para que aparezcan las imágenes que deseemos.

3. En el interior de la etiqueta <head></head> añadimos una etiqueta <style></style> que contenga el código CSS que aparece en el "Step 2" de la página de w3schools.

4. Antes etiqueta de cierre </body>, añadimos las etiquetas <script></script> y pegamos en su interior el código JS que aparece en el "Step 3".

Ejercicio

Cambiar la apariencia del "slideshow" que acabamos de crear:
  • Cambiando la posición de los elementos que aparecen superpuestos alas imágenes: el "caption" o mensaje que aparece en la parte inferior de cada imagen, por ejemplo. También podemos cambiar el tipo de letra, etc..
  • Cambiar la forma de los circulos que aparecen en la parte inferior de las imágenes.

Crear un "slideshow" a través de una librería/plug-in de JS

No siempre será necesario que creemos un "slideshow" escribiendo/pegando todo el código correspondietne. También es posible incluyendo una librería JS que ya contenga todo el código JS y CSS.

Si buscamos en Google "javascript slideshow plugin" aparecerá como primer resultado la siguiente web:

http://www.slidesjs.com/

Para incluir este slideshow en nuestra página tenemos que pegar en nuestra web el código de la sección "Basic markup". A continuación aparece una imagen de dicho código:


La primera de las 2 lineas que aparecen en el recuadro negro, habrá que sustituirlas por las siguiente:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

La segunda de las lineas incluye el archivo .js del plug-in, que tendremos que descargar pulsando sobre el boton negro "Download". Descomprime el .zip que se descarga y copia el archivo "jquery.slides.min.js" en tu carpeta "js". A continuación cambia la segunda linea por algo así:

<script src="js/jquery.slide.min.js"></script>

Comentarios

Publicar un comentario

Entradas populares de este blog

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más