https://ghs.com/js/iis-bullet-nav.js

1/*
2 * Ideal Image Slider: Bullet Navigation Extension v1.0.2
3 *
4 * By Gilbert Pellegrom
5 * http://gilbert.pellegrom.me
6 *
7 * Copyright (C) 2014 Dev7studios
8 * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
9 */
10
11(function(IIS) {
12	"use strict";
13
14	var _updateActiveBullet = function(slider, activeIndex) {
15		var bullets = slider._attributes.bulletNav.querySelectorAll('a');
16		if (!bullets) return;
17
18		Array.prototype.forEach.call(bullets, function(bullet, i) {
19			IIS._removeClass(bullet, 'iis-bullet-active');
20			bullet.setAttribute('aria-selected', 'false');
21			if (i === activeIndex) {
22				IIS._addClass(bullet, 'iis-bullet-active');
23				bullet.setAttribute('aria-selected', 'true');
24			}
25		}.bind(this));
26	};
27
28	IIS.Slider.prototype.addBulletNav = function() {
29		IIS._addClass(this._attributes.container, 'iis-has-bullet-nav');
30
31		// Create bullet nav
32		var bulletNav = document.createElement('div');
33		IIS._addClass(bulletNav, 'iis-bullet-nav');
34		bulletNav.setAttribute('role', 'tablist');
35
36		// Create bullets
37		Array.prototype.forEach.call(this._attributes.slides, function(slide, i) {
38			var bullet = document.createElement('a');
39			bullet.innerHTML = i + 1;
40			bullet.setAttribute('role', 'tab');
41
42			bullet.addEventListener('click', function() {
43				if (IIS._hasClass(this._attributes.container, this.settings.classes.animating)) return false;
44				this.stop();
45				this.gotoSlide(i + 1);
46			}.bind(this));
47
48			bulletNav.appendChild(bullet);
49		}.bind(this));
50
51		this._attributes.bulletNav = bulletNav;
52		this._attributes.container.appendChild(bulletNav);
53		_updateActiveBullet(this, 0);
54
55		// Hook up to afterChange events
56		var origAfterChange = this.settings.afterChange;
57		var afterChange = function() {
58			var slides = this._attributes.slides,
59				index = slides.indexOf(this._attributes.currentSlide);
60			_updateActiveBullet(this, index);
61			return origAfterChange();
62		}.bind(this);
63		this.settings.afterChange = afterChange;
64	};
65
66	return IIS;
67
68})(IdealImageSlider);