JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<div id="time-line">
    <div class="container">
        <div id="time-line-container">
            <ul>
                <li class="active time-line-content" data-id="1" data-year="1935">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="2" data-year="1946">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="3" data-year="1995">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="4" data-year="1996">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="5" data-year="1997">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="6" data-year="1998">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="7" data-year="1999">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="8" data-year="1935">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="9" data-year="1946">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="10" data-year="1995">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="11" data-year="1996">
                    <img src="http://lorempixel.com/1280/720/"/>
                </li>
                <li class="time-line-content" data-id="12" data-year="1997">
             ...

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#time-line{}
#time-line #time-line-container{
    width: 100%;
    overflow: hidden;
}
#time-line #time-line-container ul li{
    float: left;
    list-style: none;
    position: relative;
}
#time-line #time-line-container ul li img{
    width: 100%;
    max-width: 100%;
    max-height: 500px;
}

#time-line #time-line-selector{
    width: 100%;
    margin: 30px 0 0 0;
    overflow: auto;
}
#time-line #time-line-selector ul{
    margin: 0 auto;
}
#time-line #time-line-selector ul li{
    float: left;
    margin: 0;
    list-style: none;
    position: relative;
}
#time-line #time-line-selector ul li a{
    display: block;
    position: relative;
    background: #ffffff;
    margin: 8px 0 0 0;
    padding: 16px 10px 8px 10px;
    color: #aeaeae;
    font-size: 17px;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#time-line #time-line-selector ul li a:before{
   display: block;
   content: "";
   position: absolute;
   background: #e1e1e1;
   top: 0;
   left: 0;
   margin: 0px 0 0 0px;
   width: 100%;
   height: 1px;
   border-radius: 50%;
}
#time-line #time-line-selector ul li a:after{
    display: block;
    content: "";
    position: absolute;
    background: #aeaeae;
    top: 0;
    left: 50%;
    margin: -5px 0 0 -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
#time-line #time-line-selector ul li a:hover, #time-line #time-line-selector ul li a.active{
    background: #595959;
    color: #ffffff;
}
#time-line #time-line-selector ul li a:hover:after, #time-line #time-line-selector ul li a.active:after{
    background: #e62b28;
}

JavaScript

// For showing time line with smooth Scroll
if ($("#time-line").length){
    var timeLineWidth = $("#time-line .container").width();
    $(".time-line-content").css({
        width: function(){
            return timeLineWidth;
        }
    });

    $(".time-line-content").each( function(){
        var yearId = $(this).attr("data-id");
        var year = $(this).attr("data-year");
        $("#time-line-selector ul").append('<li class="time-line-selector"><a href="#" data-id-selector="' + yearId + '" data-year-selector="' + year + '">' + year + '</a></li>')
        console.log(year);
    });

    var timeLineContent = $(".time-line-content");
    var timeLineContentWidth = timeLineContent.width();
    var timeLineContentTotalWidth = timeLineContent.length * timeLineContentWidth;
    $("#time-line-container ul").css({
        width: function(){
            return timeLineContentTotalWidth;
        }
    });

    var timeLineSelector = $(".time-line-selector");
    var timeLineSelectorWidth = timeLineSelector.width();
    var timeLineSelectorTotalWidth = timeLineSelector.length * timeLineSelectorWidth + 10;
    $("#time-line-selector ul").css({
        width: function(){
            return timeLineSelectorTotalWidth;
        }
    });

    $("#time-line-selector ul li a").click(function(event) {

        event.preventDefault();

        $("#time-line-selector ul li a").removeClass("active");

        $(this).addClass("active");

        var yearId = $(this).attr("data-id-selector");

        $("#time-line-container ul").animate({
            "margin-left": - ( (yearId - 1) * timeLineContentWidth)
        }, 1000);

        $("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);

    });
}