En este artículo vamos a crear un Timeline gracias al plugin llamado Timeline jQuery, en el siguiente enlace puedes ver el ejemplo: https://ilkeryilmaz.github.io/timelinejs/ de lo que estamos a punto de implementar no es una conversión de elementos HTML .
1.-Crea las referencias a los archivos necesarios para la utilizanción del plugin
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="dist/js/timeline.min.js"></script> <link rel="stylesheet" href="dist/css/timeline.min.css" />
2.- Crea la estructura HTML para convertie en un TimeLine
<div class="timeline-container timeline-theme-1"> <div class="timeline js-timeline"> <div data-time="2017"> your content or markup </div> <div data-time="2016"> your content or markup </div> <div data-time="2015"> your content or markup </div> <div data-time="2014"> your content or markup </div> <div data-time="2013"> your content or markup </div> </div> </div>
3.-Crea la referencia con JQuery para los elementos HTML
$('.js-timeline').Timeline();
| Nombre | Valor Default | Tipo | Información |
| autoplay | false | true/false | Activar autoplay |
| autoplaySpeed | 3000 | int(ms) | Velocidad de Autoplay |
| mode | ‘horizontal’ | ‘horizontal”vertical’ | Estructura “posición” del timeline |
| itemClass | ‘timeline-item’ | ‘class-name’ | Valor de la clase por bloque. |
| dotsClass | ‘timeline-dots’ | ‘class-name’ | Clase contenedora para la fecha. |
| startItem | ‘first’ | ‘first”last”number’ | Número del item en donde empieza el plugin. |
| dotsPosition | ‘bottom’ | ‘bottom”top”left”right’ | Posición de las fechas en el timeline. |
| activeClass | ‘slide-active’ | ‘class-name’ | Nombre de la clase activa |
| prevClass | ‘slide-prev’ | ‘class-name’ | Nombre de la clase para elemento anterior |
| nextClass | ‘slide-next’ | ‘class-name’ | Nombre de la clase para elemento siguiente |
| pauseOnHover | true | true/false | Pausa Autoplay en mouse encima |
| pauseOnDotsHover | false | true/false | Pausa Autoplay en mouse fuera |
The post Mostrar tiempo con Timeline en jQuery appeared first on Develoteca.