Mostrar tiempo con Timeline en jQuery

DESCARGA : TimeLinejQuery

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

You may also like...

  • ERIK COPADO

    Muchas gracias, muy buen post. Tengo una duda, y es como puedo hacer que entre en un loop timeline. Cuando llegue al último punto regrese al primero para que vuelva a iniciar.

    De antemano agradezco la atención.