Simple Slider HTML5 con jQuery y un controlador básico en HTML5/CSS3/JS.
DEMO ONLINE- HTML Slides
Lo importante en el HTML son las siguientes lineas:
<div class="active cn_slid" id="cont_1">
/*Cualquier contenido*/
</div>
En en esos divs podemos ver el id llamado #cont_1
, el cual se está usando como valor para el jQuery por medio del HTML data.
- HTML Controles
Lo más importante en cuanto a los controles es lo siguiente:
data-targetslid="cont_1"
Cambiando el atributo cont_1
podemos mostrar u ocultar el div deceado con el mismo ID al hacer click en el controlador o boton especifico.
- Podemos crear otro Div:
Lo importante es crear el div dentro de
#con_slider .wrapper
.
Un nuevo div se vería algo así
<div class="cn_slid" id="cont_5">
<!--Contenido del slide numero 5-->
</div>
-
Y creamos un nuevo boton para el div creado: Creamos un nuevo boton para poder controlar el div añadido, el cual se vería de la siguiente forma:
<span data-targetslid="cont_5"></span>
Se puede notar que lo unico que le debemos cambiar es el atributo data-targetslid="cont_5"
por el ID del div que acabamos de crear.
Y listo, luego podemos cambiar el CSS y ponerle los estilos que queramos.
Klooid.com | El codigo entregado acá es completamente libre de uso.Christopher Quiros S.