<div id="timeline-container" class="clearfix">
    <div id="timeline-header">
        <h1>Header1</h1>
        <h3>Header2</h3>
    </div>
    <div id="timeline-slider"></div>
    <ul id="timeline">
        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                                                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                                                                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                                                                                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
                                                                                                        <li class="element down">
            <img src="http://www.wpclipart.com/blanks/buttons/round/button_round_yellow.png" alt="alt-image">
                <h2>Header</h2>
                <p>lorem ipsum</p>
            </li>
    </ul>
</div>

.bg-beige {
  background: #fff;
}
#timeline-container {
  width: 100%;
  background: #fff;
  overflow: hidden;
  margin: 40px auto;
}
#timeline-container #timeline-header {
  margin: 0 auto;
  z-index: 100;
  position: relative;
  width: 120px;
  top: 15px;
}
#timeline-container #timeline-header h1 {
  text-align: center;
}
#timeline-container #timeline-header h3 {
  text-align: center;
  text-transform: uppercase;
}
#timeline-container #timeline-header h3:before {
  position: absolute;
  left: -215px;
}
#timeline-container #timeline-header h3:after {
  position: absolute;
}
#timeline-container #timeline-slider {
  margin: 0 auto;
  position: relative;
  top: 20px;
  width: 650px;
}
#timeline-container #timeline {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: auto;
  height: 450px;
  margin-left: 0;
}
#timeline-container .element {
  content: "";
  position: relative;
  top: 50px;
  min-width: 430px;
  margin: 0 auto;
}
#timeline-container .element img {
  width: 160px;
  margin-left: 60px;
}
#timeline-container .element h2 {
  margin-left: 115px;
}
#timeline-container .element p {
  width: 300px;
  text-align: center;
}
#timeline-container .element:last-child {
  min-width: 330px;
}
#timeline-container .down {
  margin-top: 70px;
}
#timeline-container .no-down {
  margin-top: 0;
}

$(function () {
    var timelineContainer = $("#timeline-container"),
        timelineContent = $("#timeline"),
        elementContent = $(".element");

    var scrollbar = $("#timeline-slider").slider({
        range: "max",
        max: 100,
        slide: function (event, ui) {
            if (timelineContent.width() > timelineContainer.width()) {
                timelineContent.css("margin-left", Math.round(
                    ui.value / 100 * (timelineContainer.width() - timelineContent.width())
                    ) + "px");
            } else {
                timelineContent.css("margin-left", 0, "padding", 0, "left", 0);
            }
        }
    });


    timelineContainer.css("overflow", "hidden");

});