Monthly timeline grid with right to left horizontal scroll

Question

I want to make a Horizontal Timeline Carousel in Bootstrap with Js I don't know where to start. The structure is something like below. Please help

Either I can do it with table column or with List Item. By clicking the arrow key the list scroll right to left with one month forward. I did not find and similar code around the internet.

<table width="100%" class="table table-responsive table-bordered">
  <tbody>
    <tr>
      <td width="20%" class=""><div class="stages ready" style="left: 0px;">
          <ul class="">
            <li data-stage-date="2018-07-01" class="ready" style="width: 480px; left: 0px;">
              <div class="interval"> <span class="title">July</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-08-01" class="ready" style="width: 480px; left: 480px;">
              <div class="interval"> <span class="title">August</span> </div>
              <div class="summary" data-open="100% of ₹10,000 " data-weighted-open="₹10,000" data-won="₹0" data-value="₹10,000" data-weighted-summary="₹10,000" data-percentage="100">
                <div class="icon"> <span class="plus" data-summary="₹10,000" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹10,000" data-weighted-summary="" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-09-01" class="ready" style="width: 480px; left: 960px;">
              <div class="interval"> <span class="title">September</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-10-01" class="ready" style="width: 480px; left: 1440px;">
              <div class="interval"> <span class="title">October</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-11-01" class="ready" style="width: 480px; left: 1920px;">
              <div class="interval"> <span class="title">November</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-06-01" class="ready" style="width: 480px; left: -480px;">
              <div class="interval"> <span class="title">June</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
          </ul>
        </div></td>
    </tr>
  </tbody>
</table>

Answer 1

I think you can do this some elements, but this time, I used ul(list). You can use the scrollLeft (jQuery method), so your only work is that setting the new position properly.

$("scroll content(ul)").scrollLeft("100(new position)");

For example . I hope this will help you.

UPDATED
Finally, I'll show you an example. Link

You have SyntaxError: Unexpected token . , so please solve this error at first. As long as JavaScript run without error, I can debug.

  ul.animate({
      ul.scrollLeft(ul.scrollLeft() + targetMonth.position().left - 15);
  }, 200);

  ↓

  ul.animate({
      scrollLeft: ul.scrollLeft() + targetMonth.position().left - 15
  }, 200);

Finally
First, Add some style and elements your #date-list to confirm working properly.

/* ADDED */
#date-list {
    overflow-x: auto;
}

<ul id="date-list" class="d-flex">
    <li id="month-1" class="list-group-item">...</li>
    <li id="month-2" class="list-group-item">...</li>
    <li id="month-3" class="list-group-item">...</li>
    <li id="month-4" class="list-group-item">...</li>
    <li id="month-5" class="list-group-item">...</li>
    <li id="month-6" class="list-group-item">...</li>
    <!-- ADDED -->
    <li id="month-7" class="list-group-item">...</li>
    <li id="month-8" class="list-group-item">...</li>
</ul>

Then, add a variable in init process and modify a logic.
(If you should handle properly when the number of #date-list li is not 12) (But I assume at least you have eight item, because you have 'today' button.)

// ADDED in init process. 
var listCount = $("#date-list li").length;

// using it instead of hard cording.
 } else if (currentMonth === listCount) {

Now, You can see scrollbar, let't add a class in your css file.
(If you want to see the highlight where the list-item that you focus.)

.list-group-item.active-month {
    color: #31708f;
    background-color: #d9edf7;
}

Finally, if you don't want to show the default scroll bar, I think the best easy way is to use webkit-scrollbar, but unfortunately, that isn't working on IE.

#date-list::-webkit-scrollbar {
    /* Of course, you can also change the scrollbar what it looks. */
    display: none;
}

If you need to work only IE11 or Egde, I recommend Perfect-scrollbar , or at leaset other plugins, rather than implement yourself.

If you need to work other version of IE, I can't help.(I don't have an environment.)

Here's example using perfect-scrollbar .