Как связать разбиение на страницы на pagecroll в jquery?

Question

Я создал карусель в javascript, чтобы показать несколько содержимого либо с помощью прокрутки страницы, либо нажатием кнопки. Для этой цели я использовал viewpager.js. Я добавил разбивку на страницы внизу, которая отлично работает при нажатии кнопок. Я не могу понять, как связать его со списком страниц. Любая помощь приветствуется. Мой код:

HTML

<div id='prev'> 
     <button id="btn-prev"><img src='img/orange-towards-left.png'></button> 
    </div> 
    <div class='pager'> 
     <div class='pager_items' id='info'>    
     </div> 
    </div> 
    <div id='next'> 
     <button id="btn-next"><img src='img/orange-towards-right.png'></button> 
     </div> 
     <div id='pagination'> 
     <ul></ul> 
     </div> 

JS

item_container = document.querySelector('.pager_items'); 
    view_pager_elem = document.querySelector('.pager'); 
    w = view_pager_elem.getBoundingClientRect().width; 
    items = payerAccArr.length; 
    item_container.style.width = (items * 100)+ '%'; 
    var child_width = (100/items) + '%'; 
    var html = ""; 
    document.getElementById('monthInfo').innerHTML=payerAccArr[0].DateKey + " Bill Amount "; 
    for (var i = 0; i < items; i++) { 
    html += "<div class=toggle><h4>Payer Account Name</h4> <ul> <li>" + payerAccArr[i].PayerAccountName + 
    "</li></ul> _______________ <ul><li> "+(payerAccArr[i].TotalAmount).toFixed(2) + 
    " USD</li> </ul></div>"; 
    } 
    item_container.innerHTML = html; 

    for(var i=0;i<items;i++) 
     item_container.children[i].style.width = child_width; 

    var htmlStr='<li class="current"></li>'; 
    for(var i=0;i<items-1;i++){ 
     htmlStr += '<li></li>'; 
    } 
    $('#pagination ul').html(htmlStr); 
    vp = new ViewPager(view_pager_elem, { 
     pages: item_container.children.length, 
     vertical: false, 
     onPageScroll : function (scrollInfo) { 
     offset = -scrollInfo.totalOffset; 
     invalidateScroll(); 
     }, 
     onPageChange : function (page) { 
    document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount "; 
    } 
    }); 

    window.addEventListener('resize', function() { 
     w = view_pager_elem.getBoundingClientRect().width; 
     invalidateScroll(); 
    }); 
    document.getElementById('btn-prev').addEventListener('click', function(){ 
    vp.previous(); 
     if(index>0){ 
     createDoughnutChart(index--); 
    } 
    var li = jQuery("li.current"); 
    if (li.length){ 
     var $prev = li.prev(); 
     if($prev.length == 0) 
     $prev = $("#pagination li").last().addClass("current");  
     li.removeClass("current"); 
     $prev.addClass("current"); 
     } 
    }); 

Аналогичный код для следующей кнопки также было написано.

Answer 1

Эта проблема решена. Я внес изменения в функцию onPageChange, добавив следующий код. Теперь я могу связать его как с прокруткой страницы, так и с кнопками.

JS:

onPageChange : function (page) { 
     document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount "; 
    // console.log('page', page); 
    var li = $("li.current"); 
    var curIndex = li.index(); 

    if(li.length){ 
     var $prev = li.prev(); 
     var $next = li.next(); 

     if(page == $prev.index()){ 

      li.removeClass("current"); 
      $prev.addClass("current"); 
     } 

     if(page==$next.index()){ 

      li.removeClass("current"); 
      $next.addClass("current"); 
     } 
    } 
    }