javascript jquery custom-data-attribute onepage-scroll

Get data-attribute in onepage-scroll pagination

I use One Page Scroll for full screen carousel. I want to display data-attribute in pagination. So far, I am able to display number of slides in pagination. How can I get data-attribute in pagination?

Here I want to display years in pagination.

HTML

<div id="main" class="main">
  <section data-year="1950" class="page1">
  <div class="page_container">
    <h1>Forward Thinking</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"</p>
    </div>
</section>
<section data-year="1960" class="page2">
  <div class="page_container">
    <h1>iPhone 5S</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  </div>
</section>
</div>

JavaScript

$('ul.onepage-pagination li a').each(function() {
    var elem = $(this);
    var li = elem.parent();
    var ul = li.parent();
    elem.html((li.index() + 1) + '/' + ul.children().length);
});

Solution

To get the data attribute of the right section, you can use the index provided by the .each() function you already use.

With that index, you can target the right section and retreive its data-year using .data().

In the snippet below (please run it in full page), I've hidden the icon showing which section is active... And quickly played with CSS to maximize the usage of the text links.

$(".main").onepage_scroll();

var sections = $(".main section");

$('ul.onepage-pagination li a').each(function(index) {
  var elem = $(this);
  var li = elem.parent();
  var ul = li.parent();
  
  elem.html(sections.eq(index).data("year")+" - "+(li.index() + 1) + '/' + ul.children().length);
});

.onepage-pagination ul{
  with:6em;
}
.onepage-pagination a{
  width:100% !important;
}
.onepage-pagination a:before{
  display:none !important;
}
.onepage-pagination a.active{
  font-weight:bold;
  text-decoration:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>

<div id="main" class="main">
  <section data-year="1950" class="page1">
    <div class="page_container">
      <h1>Forward Thinking</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"</p>
    </div>
  </section>
  <section data-year="1960" class="page2">
    <div class="page_container">
      <h1>iPhone 5S</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
    </div>
  </section>
</div>

CodePen