Events timeline slider with Swiper Slider

Events timeline slider

Timeline, in the digital world, is a way of narrating a story in the chronological order. Reading a list of dates and events in a table is never as interesting as creating an interactive timeline slider that’s slides smoothly and works in all browsers with touch gestures. So here I built my timeline slider with Swiper Slider due to its dynamic API and events and created a beautifully crafted timeline in an easy way.

I’m assuming for the sake of this post that you know Javascript not just familiar with it, but if there are any questions marks in your head, let me know and I can do a follow-up post 🙂

Attention: I don’t think it’s responsive yet.

Features:

Bootstrap 4.
Swiper Slider.
Clean Javascript.
HTML attributes (data-autoplay, data-speed).
Simple design 🙂 .
Ready to use.

Screenshots:

Our HTML structure:

<div class="timeline" data-autoplay="5000" data-speed="700">
    <!-- Swiper timeline -->
    <div class="swiper-container timeline-dates">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><div>2018</div></div>
        </div>
    </div>
    
    <div class="swiper-container timeline-contents">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <h5>Lorem ipsum dolor sit amet</h6>
                <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
            </div>

        </div>
    </div>
    <!-- Add Arrows -->
	<div class="timeline-buttons-container">
        <div class="timeline-button-next"></div>
        <div class="timeline-button-prev"></div>
    </div>

</div>

Our Javascript:

!function ($) {

	"use strict";

	/**
	* Swiper slider - Timeline
	*/
	var container = $('.timeline');

	var timelineContents = new Swiper('.timeline-contents', {
		navigation: {
			nextEl: '.timeline-button-next',
			prevEl: '.timeline-button-prev',
		},
		grabCursor: true,
	    spaceBetween: 10,
	    autoHeight: true,
		autoplay: {
			delay: (container.data('autoplay'))?parseInt(container.data('autoplay'), 10):7000,
		},
		speed: (container.data('speed'))?parseInt(container.data('speed'), 10):700,
	});
	var timelineDates = new Swiper('.timeline-dates', {
	    spaceBetween: 70,
	    centeredSlides: true,
	    slidesPerView: 'auto',
	    touchRatio: 0.2,
	    slideToClickedSlide: true
	});
	timelineContents.controller.control = timelineDates;
	timelineDates.controller.control = timelineContents;

}(jQuery);

References and Credits:

Bootstrap
Ionicons
Swiper Slider
Poppins font