Slider con solo CSS

Crear un Slider puede llegar a volverse complicado, sobretodo si el no sabemos con seguridad cuantas imagenes vamos a colocar.

Podria ser facil usar javascript, pero el objetivo de este tutorial es no hacerlo.

Vamos a ver un Slider adaptable y al cual se le puede añadir multiples imagenes sin la necesidad de modificar el css. He aqui un Ejemplo:

El HTML:


<div class='slider'>
	<input id='img-1' type="radio" name="slider-1" checked>
	<div class="content">
		<label for="img-3"></label>
		<img src="imagen1.png" alt="">
		<label for="img-2"></label>
	</div>
	
	<input id='img-2' type="radio" name="slider-1">
	<div class="content">
		<label for="img-1"></label>
		<img src="imagen2.png" alt="">
		<label for="img-3"></label>
	</div>
	
	<input id='img-3' type="radio" name="slider-1">
	<div class="content">
		<label for="img-2"></label>
		<img src="imagen3.png" alt="">
		<label for="img-1"></label>
	</div>
</div>

HTML : El Elemento Track

El Elemento Track se encarga de añadir "Subtitulos" o "Pistas" a los Elementos de Video y Audio dependiendo de su uso.

La forma de añadirlos es muy facil, se puede hacer directamente con HTML o añadirlo a un video con Javascript.


<video width="600" height="400" controls>
	<source src="video.mp4" type="video/mp4">
	<track src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español">
	<track src="subtitulos2.vtt" kind="subtitles" srclang="en" label="English">
</video>

Como ven el Elemento Track va dentro de un Video, ademas se pueden añadir multiples "Tracks" dentro de un mismo Video.


<track src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español" default>

Atributos:

src Url donde se encuentra el archivo Track (debe estar en el mismo servidor). Solo acepta los formatos WebVTT y TTML.
kind Especifica de que tipo es el Track: "captions", "chapters", "descriptions", "metadata", "subtitles".
srclang Señala el lenguaje del Track.
label Especifica el nombre del Track.
default Especifica si este Track sera el que se muestre por defecto.

Popular Posts