Pagination in infowindow of clusters in gmap3

How can i set pagination for google map cluster infowindow. Iam using gmap3.

 $(this).gmap3(
          {clear:"overlay"},
          {
          overlay:{
            latLng: cluster.main.getPosition(),
            options:{
              content:  eventlist,
              offset: {
                x:-46,
                y:-73
              }
            }
          }
        });

iam having eventlist as

eventlist ='


    <div class='infobubble infobulle drive'>
        <div class='infobubble_wrap'>
          <div class='infobubble_event_text'>
            <div class='infobubble_event_names'>arts</div>
            <div class='infobubble_date'>Feb 06</div>
            <div class='infobubble_event_venue'>Bulldog</div>
          </div>
          <div class='infobubble_event_image'><img src=thumb.jpg></img></div>
         <div class='clear'></div>
        </div>
      </div>
      <div class='infobubble infobulle drive'>
        <div class='infobubble_wrap'>
          <div class='infobubble_event_text'>
            <div class='infobubble_event_names'>Comedy</div>
            <div class='infobubble_date'>Jun 13</div>
            <div class='infobubble_event_venue'>Our Little Comedy Theater</div>
          </div>
          <div class='infobubble_event_image'><img src=eventdefault_thumb.jpg></img></div>
          <div class='clear'></div>
        </div>
       </div>

';

How can i get my event 'arts' and 'comedy' in two pages of the infowindow of my gmap3.I am new to gmap3?

I solved it.I wrote a function to get the details of each marker individually and called the function to display the details in the infowindow.Initially i was set to zero.

 function infowindowhtml(i)
            {
                context = global_context_menu;
                var markernum = context.length;
                var first = next = '';
                if (i == 0) {
                    first = '';
                } else {
                    var j = i - 1;
                    first = "<div class='prev_info' onclick='showinfodetails(" + j + ");'><<</div>";
                }
                if (i == (markernum - 1)) {
                    next = '';
                } else {
                    var j = i + 1;
                    next = "<div class='next_info' onclick='showinfodetails(" + j + ");'>>></div>";
                }
                var pagination = '<div>' + first + '<div class="middle_section">' + (i + 1) + '</div>' + next + '</div>';
                    var datastring = context[i].data;
                eventlist="    <div class='infobubble infobubble_cluster infobulle"+(datastring ? " drive" : "") + "'><div class='infobubble_wrap infobubble_wrap_cluster'><div class='infobubble_event_text'><div class='infobubble_event_names'>Comedy</div>" +"<div class='infobubble_date'>Jun 13</div>" +"<div class='infobubble_event_venue'>Our Little</div>" +"<div class='clear'></div>" + pagination + "</div></div>";
                return eventlist;
            }

in the function showinfodetails i wrote

    function showinfodetails(i) {
        eventlist = infowindowhtml(i);
        $('.infobubble_content').html(eventlist);
    }

so on each click on next j will get increased and for each click on prev j will get decreased.This will be passed to the showinfodetails function and the details of that marker will be displayed.

We get context from

mouseover: function(cluster, event, context) {
                                    global_context_menu = context.data.markers;
}

global_context_menu globally declared.