Enhancement proposal: labelled dots

[aurovrata]

I have a request from some clients to enable labels in slider dots to make it more obvious the slide number.

I though this could be a useful feature for the rest of the community, hence here is what I propose:

introduce a new settings:

_.opt.labelDots = false | []

by default the labeDots is false and the dots appear as they currently are.

However, a user can parse an empty array or a an array of custom labels. In both cases an additional class is added to the dot container label-dots so as to ensure the dots are large enough to envelope the labels with the following additional rule in css stylesheet:

.label-dots .glider-dot {
	width: 1.1rem;
	height: 1.1rem;
	font-size: 1rem;
	line-height: 1;
	padding-bottom: 2px;
}

If the option labelDots is an empty array, the dot.innerText is set to the current slide index (+1), else if a corresponding label exist in the passed array, then that value is used instead.

[NickPiscitelli]

Thanks for this PR, definitely appreciated! As opposed to adding to the core plugin, I think we should make a Playground section for the docs and add great examples like this to it. I think this is achievable by using the existing methods, but we may need to make a tweak to core to facilitate.

[aurovrata]

I think this is achievable by using the existing methods, but we may need to make a tweak to core to facilitate.

great. Do keep me posted. I will happily contribute to the docs too.