时间轴更改幻灯片/日期，带箭头

Question

我正在处理水平滑块（this one），我正在尝试添加新功能：如果单击箭头，它们将转到下一个/上一个日期，而不是滚动时间线。

此刻，它只显示点击日期本身的下一个/上一个日期，但是当点击箭头时我也希望这样做。

这是右箭头的代码，这是点击日期的方式（我想为箭头添加相同的功能）和HTML：

//detect click on the next arrow
timelineComponents['timelineNavigation'].on('click', '.next', function(event) {
  event.preventDefault();
  //updateSlide(timelineComponents, timelineTotWidth, 'next'); //Disabled this functionality

});



//detect click on the a single event - show new event content
timelineComponents['eventsWrapper'].on('click', 'a', function(event) {
  event.preventDefault();
  timelineComponents['timelineEvents'].removeClass('selected');
  $(this).addClass('selected');
  updateOlderEvents($(this));
  updateFilling($(this), timelineComponents['fillingLine'], timelineTotWidth);
  updateVisibleContent($(this), timelineComponents['eventsContent']);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cd-horizontal-timeline">
  <div class="timeline">
    <div class="events-wrapper">
      <div class="events">
        <ol>
          <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
          <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
          <li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
        </ol>

        <span class="filling-line" aria-hidden="true"></span>
      </div>
      <!-- .events -->
    </div>
    <!-- .events-wrapper -->

    <ul class="cd-timeline-navigation">
      <li><a href="#0" class="prev inactive">Prev</a></li>
      <li><a href="#0" class="next">Next</a></li>
    </ul>
    <!-- .cd-timeline-navigation -->
  </div>
  <!-- .timeline -->

  <div class="events-content">
    <ol>
      <li data-date="28/02/2014">
        <h2>Event title here</h2>
        <em>February 28th, 2014</em>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi
          reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
        </p>
      </li>

      <li data-date="20/04/2014">
        <h2>Event title here</h2>
        <em>March 20th, 2014</em>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi
          reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
        </p>
      </li>

      <li data-date="20/05/2014">
        <h2>Event title here</h2>
        <em>May 20th, 2014</em>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi
          reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
        </p>
      </li>
    </ol>
  </div>
</section>

编辑： 我在箭头右侧功能上走了多远：

//detect click on the next arrow
timelineComponents['timelineNavigation'].on('click', '.next', function(event){
    event.preventDefault();
    timelineComponents['timelineEvents'].find('.selected').next('li').addClass('selected'); //This is not working

});

要将类添加到下一个li，我这样做，但它不起作用：

timelineComponents['timelineEvents'].find('.selected').next('li').addClass('selected');