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();

 

NombreValor DefaultTipoInformación
autoplayfalsetrue/falseActivar autoplay
autoplaySpeed3000int(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
pauseOnHovertruetrue/falsePausa Autoplay en  mouse encima
pauseOnDotsHoverfalsetrue/falsePausa 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.