Get data-attribute in onepage-scroll pagination

Question

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);
});

The markup seems to be missing. Please share the markup for `ul.onepage-pagination li a`. — Developer107, Apr 16 '18 at 05:28

score 1 · Accepted Answer · answered Apr 16 '18 at 05:59

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

Other contents are not displayed with this slider - like footer below the slider. How can I display this? — universal, Apr 16 '18 at 10:54
It takes the whole space by desing... You can place your footer in the last `section`. — Louys Patrice Bessette, Apr 16 '18 at 12:37
When I integrated it on **Wordpress** with header - everything is broken. Without header it is fine. — universal, Apr 16 '18 at 14:57

score 0 · Answer 2 · answered Apr 16 '18 at 05:36

0

It seems like you're using jQuery in your example. You can get attributes from HTML Elements via .attr() as described in their official docs.

In your example you just have to call .attr('data-year') on the corresponding element to get its value.

answered Apr 16 '18 at 05:36

Benjamin Lüscher

382
3
12

I applied ``.attr('data-year')`` in above function. But it displays the same **(1950)** data throughout the whole pagination. – universal Apr 16 '18 at 05:51
your query-selector in your example is `ul.onepage-pagination li a` but in your html you added the `data-year` attribute to `section`. May you have to iterate over `.main section` instead of `ul.onepage-pagination li a`? – Benjamin Lüscher Apr 16 '18 at 05:54

Get data-attribute in onepage-scroll pagination

2 Answers2