https://www.theshell.org/static/js/lory-dots.1815e2288d1c.js

1/**
2 * Initialize dot navigation support on a Lory slider.
3 * This assumes the following markup inside the slider:
4 *
5 * <div class="dots">
6 *     <button data-index="0"></button>
7 *     <button data-index="1"></button>
8 *     [...]
9 * </div>
10 *
11 * Click handlers will be attached to the buttons, and the `activeClass`
12 * will be applied accordingly whenever a slide changes.
13 *
14 * @param {HTMLElement} slider The element containing the slides and dots
15 * @param {Lory} loryInstance  The Lory instance initialized on `slider`
16 * @param {string} [activeClass='-active'] The class that will be given to the active dot
17 * @see http://meandmax.github.io/lory/ | Dot navigation example
18 */
19function initLoryDots(slider, loryInstance, activeClass = '-active') {
20	var dots = slider.querySelectorAll('.dots button');
21	dots = Array.from(dots)
22
23	if (!(dots.length > 1)) return;
24
25	// Attach the click handler on dots
26	dots.forEach(function(dot) {
27		dot.addEventListener('click', function() {
28			var target = parseInt(dot.dataset.index, 10);
29			loryInstance.slideTo(target);
30		})
31	})
32
33	/* Reset dots when resizing lory */
34	slider.addEventListener('on.lory.resize', function() {
35		dots.forEach(function(dot) {
36			dot.classList.remove(activeClass);
37		})
38		dots[0].classList.add(activeClass);
39	});
40
41	// Make sure the active dot is updated when a slide changes
42	slider.addEventListener('after.lory.slide', function(event) {
43		var activeIndex = event.detail.currentSlide - 1;
44		dots.forEach(function (dot) {
45			dot.classList.remove(activeClass);
46		})
47		dots[activeIndex].classList.add(activeClass);
48	});
49
50	// Set the first dot as active
51	dots[0].classList.add(activeClass);
52}