How do I use text as pagination with Owl Carousel

Question

Using Owl Carousel I wanted to use text from the alt="Image Alt Text" or title="Image Title Text" of images as pagination instead of bullets / circles. In the process of writing the question and fiddles I sussed it. See below. Hope this is useful to someone else.

DEMO FIDDLE

Answer 1

To prevent the pager disappearing whenever the slider is re-sized (such as on a responsive site), add this to your owl config:

afterUpdate: customPager

Here's an updated fiddle: http://jsfiddle.net/peterhay/xrqjaxk7/

Note: Someone deleted this comment last time. Presumably for not answering the question. However it wasn't really a question to begin with and I think this is an important addition to the original post, which could save someone a lot of headache. I don't currently have the "50 reputation" required to comment on a question.

Answer 2

The custom function works with a single item:

singleItem: true,

But if I have say 4 items then it only shows the first 2 as menu paginations.