Sometimes you need to tell a story for the visitors. For example from when your company established and what happened during the years. In these cases you might want to use a milestone timeline. The following code is a horizontal timeline to build a beautiful milestone with sliding effect.

HTML
<!-- this script got from www.devanswer.com -->
<div class="container"> <h1 class="title">Our Milestones</h1> <div class="timeline"> <div class="timeline-nav"> <div class="timeline-nav__item">1985</div> <div class="timeline-nav__item">1988</div> <div class="timeline-nav__item">1998</div> <div class="timeline-nav__item">2006</div> <div class="timeline-nav__item">2008</div> <div class="timeline-nav__item">2010</div> <div class="timeline-nav__item">2012</div> <div class="timeline-nav__item">2013</div> <div class="timeline-nav__item">2015</div> <div class="timeline-nav__item">2016</div> </div> <div class="timeline-wrapper"> <div class="timeline-slider"> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-1.jpg" data-year="1985"> <span class="timeline-year">1985</span> <div class="timeline-slide__content"> <h4 class="timeline-title">First Year</h4> <p class="timeline-text">Some texts about the first year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-2.jpg" data-year="1988"> <span class="timeline-year">1988</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Second Year</h4> <p class="timeline-text">Some texts about the second year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-3.jpg" data-year="1998"> <span class="timeline-year">1998</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Third Year</h4> <p class="timeline-text">Some texts about the third year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-4.jpg" data-year="2006"> <span class="timeline-year">2006</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Fourth Year</h4> <p class="timeline-text">Some texts about the fourth year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-5.jpg" data-year="2008"> <span class="timeline-year">2008</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Fifth Year</h4> <p class="timeline-text">Some texts about the fifth year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-6.jpg" data-year="2010"> <span class="timeline-year">2010</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Sixth Year</h4> <p class="timeline-text">Some texts about the sixth year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-7.jpg" data-year="2012"> <span class="timeline-year">2012</span> <div class="timeline-slide__content"> <<h4 class="timeline-title">Seventh Year</h4> <p class="timeline-text">Some texts about the seventh year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-8.jpg" data-year="2013"> <span class="timeline-year">2013</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Eighth Year</h4> <p class="timeline-text">Some texts about the eighth year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-9.jpg" data-year="2015"> <span class="timeline-year">2015</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Ninth Year</h4> <p class="timeline-text">Some texts about the ninth year.</p> </div> </div> <div class="timeline-slide" style="background-image: url(http://devanswer.com/codes/files/timeline-10.jpg" data-year="2016"> <span class="timeline-year">2016</span> <div class="timeline-slide__content"> <h4 class="timeline-title">Tenth Year</h4> <p class="timeline-text">Some texts about the tenth year.</p> </div> </div> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800'> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js'></script><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>
CSS
* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  background-color: #003471;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title {
  font-size: 25px;
  color: #fff;
  font-weight: 300;
}

.timeline {
  width: 100%;
  position: relative;
  margin-top: 10px;
}
.timeline-nav__item {
  width: auto;
  height: auto;
  text-align: center;
  opacity: 0.5;
  background: transparent;
  color: #afc9f6;
  margin: 15px 25px !important;
  position: relative;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
  outline: none;
  cursor: pointer;
}
.timeline-nav__item::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #afc9f6;
  transition: .2s;
}
.timeline-nav__item.slick-current {
  color: #ff9900;
  opacity: 1;
}
.timeline-nav__item.slick-current::before {
  background-color: #ff9900;
}
.timeline-wrapper {
  position: relative;
  width: 100%;
  height: 360px;
  margin: 60px auto;
}
@media (max-width: 500px) {
  .timeline-wrapper {
    height: 800px;
    max-height: 700px;
  }
}
.timeline-slider {
  height: 100%;
}
.timeline .slick-list {
  height: 100%;
}
@media (min-width: 1080px) {
  .timeline .slick-list {
    padding: 0 180px !important;
  }
}
.timeline .slick-track {
  height: 100%;
}
.timeline-slide {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  outline: none;
  background-size: auto 400px, cover;
  background-position: top;
  margin: 0 24px;
  width: 80%;
  z-index: 1;
}
.timeline-slide:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 52, 113, 0.8);
  z-index: 2;
}
.timeline-slide__content {
  z-index: 5;
  position: absolute;
  top: 220px;
  background: #ffffff;
  width: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, 0px);
          transform: translate(-50%, 0px);
  padding: 20px;
  opacity: 0;
  transition: opacity 1s;
}
@media (max-width: 500px) {
  .timeline-slide__content {
    width: 100%;
  }
}
.timeline-year {
  z-index: 5;
  font-size: 35px;
  color: #ffffff;
  background: #ff9900;
  padding: 15px 26px;
  transition: opacity 1.2s;
  position: absolute;
  right: 0;
  opacity: 0;
}
.timeline-title {
  color: #ff9900;
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
}
.timeline-text {
  font-size: 18px;
  line-height: 28px;
  color: #666666;
}
.timeline .slick-current:after {
  background-color: rgba(0, 52, 113, 0);
}
.timeline .slick-current .timeline-year {
  opacity: 1;
}
.timeline .slick-current .timeline-slide__content {
  opacity: 1;
}
Javascript
$(function () {
  $('.timeline-nav').slick({
    slidesToShow: 12,
    slidesToScroll: 1,
    asNavFor: '.timeline-slider',
    centerMode: false,
    focusOnSelect: true,
    mobileFirst: true,
    arrows: false,
    infinite: false,
    responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 8 } },

    {
      breakpoint: 0,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 2 } }] });

  $('.timeline-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    asNavFor: '.timeline-nav',
    centerMode: true,
    cssEase: 'ease',
    edgeFriction: 0.5,
    mobileFirst: true,
    speed: 500,
    responsive: [
    {
      breakpoint: 0,
      settings: {
        centerMode: false } },


    {
      breakpoint: 768,
      settings: {
        centerMode: true } }] });
});