Set the containsControl to boolean false to indicate that the previous and next are not inside .carrotCell, then set the controlScope to the appropriate selector. Pass in the prevSelect and nextSelect selectors to find the buttons. If nothing is passed in for controlScope, it is assumed that the document body is the scope. Check the documentation for more detail.
CarrotCell can auto generate a paging control, or the "navi". The number of pages is calculated based on how many times carrotCell needs to scroll before reaching the end.
Create an empty container for the .navi. The following example will generate an ordered list (OL) of clickable numbers. It is also possible to use DIV or UL instead. The code will inspect the .navi container and generate the appropriate children nodes.
By default the paging controls are set to be numbers, but custom names can be passed through the data attribute navi of .navi.
In this example only 2 names are passed in, and the 3rd page is using the default number name.
Note that data-navi is inclosed in single quotes as per JSON specification and contents of the array in double quotes. Also note that you can not use single or double quotes in the names. For more versatility use the custom navi explained in the next section.
For more control of what content goes into the navi, create the complete markup.
kitten's with single quotes
"lol more kitten"
Note in this example there are only 2 paging controls created when there are 3 pages so the 3rd page can not be accessed. To find out how many pages there are in the carrotCell, do the math manually, or access the API method getPageCount. See the API demo and the documentation for more information.
<div id="naviCustomKitten" class="carrotCell kitten">
<li class="naviItem">kitten's with single quotes</li>
<li class="naviItem">"lol more kitten"</li>