https://www.mollywood21.com/js/jquery-stories.js

1var slideImages = [],
2    selectorBtns = [],
3    progBars = [],
4    numSlides,
5    current = 0, target = 1,
6    onDemand = false, //slide change on user demand/click
7    tl, //timeline
8    emptyProgBarsTimer;
9
10
11window.addEventListener("load", initialise);
12
13function initialise()
14{	
15	getSlides();
16	createSelectorBtns();
17	createProgBarTimeline();
18	current = 0;
19	target = 1;
20		
21  /* 
22  Most browsers now support element.classList.add()
23  & element.classList.remove()
24  
25  check browser support for your project needs:
26  http://caniuse.com/#search=classlist
27  */
28	selectorBtns[current].classList.add('selected-btn');
29	updateProgBars();
30}
31
32
33function getSlides()
34{
35	if(document.getElementsByClassName)
36	{
37		slideImages = document.getElementsByClassName("slide");
38	}
39	else //IE8
40	{
41		slideImages = document.querySelectorAll(".slide");
42	}
43  
44  numSlides = slideImages.length;
45}
46
47
48function createSelectorBtns()
49{
50	var btnsWrapper = document.getElementById('btns-wrapper');
51  
52	for(var i=0; i<numSlides; i++)
53	{
54		var selectorID = "selector"+i;
55		var progBarID = "prog-bar"+i;
56   
57    var btn = document.createElement("button");
58		btn.classList.add('selector-btn');
59		btn.id = selectorID;
60		
61		if(i==numSlides-1)
62		{
63			//no prog-bar for last btn
64			btnsWrapper.appendChild(btn);
65		}
66		else
67		{	
68			var progBar = document.createElement("div");
69			progBar.classList.add('prog-bar');
70			
71			var progBarSpan = document.createElement("span");
72			progBarSpan.id = progBarID;
73			progBarSpan.style.width = '0';
74			
75      btnsWrapper.appendChild(btn);
76			btnsWrapper.appendChild(progBar);
77			progBar.appendChild(progBarSpan);
78      progBars[i] = progBarSpan;
79		}
80    
81    selectorBtns[i] = btn;
82		selectorBtns[i].addEventListener('click', goToSlide);
83		selectorBtns[i].slideIndex = i;
84	}
85}
86
87
88function createProgBarTimeline()
89{
90	tl = new TimelineMax();
91	for(var i=0; i<numSlides-1; i++)
92	{
93		var label = "index"+i;
94		tl.to(progBars[i], 5, {width:"100%", ease:Linear.easeNone}, label);
95	}
96	//add a label at the end for easy reference (tween to label)
97	var lastLabel = "index"+(numSlides-1);
98	tl.addLabel(lastLabel);
99}
100
101/*==END of initialising==*/
102
103
104
105/*===Timers & Updates==*/
106
107function updateProgBars()
108{	
109	if(target==0 && !onDemand)
110	{
111		//empty ALL after 5 sec
112		emptyProgBarsTimer = setTimeout(emptyAllProgBars, 5000);
113	}
114	else if(target!=numSlides)
115	{
116		var targetLabel = "index"+target;
117		tl.tweenTo(targetLabel, {onComplete: changeSlide});
118	}
119}
120
121
122function updateIndex()
123{
124	selectorBtns[current].classList.remove('selected-btn');
125	current = target;
126  
127	if(current == numSlides-1)
128	{
129		target=0;
130	}
131	else
132	{
133		target += 1;
134	}
135	
136	selectorBtns[current].classList.add('selected-btn');
137	onDemand = false;
138	
139	updateProgBars();
140}
141
142
143function changeSlide()
144{
145	tl.timeScale(1); //reset speed
146	fadeIn(slideImages[target]);
147	fadeOut(slideImages[current]);
148	updateIndex();
149}
150
151
152function goToSlide(e)
153{
154	if(current!=e.target.slideIndex)
155	{
156		onDemand = true;
157		clearTimeout(emptyProgBarsTimer);
158		
159		target = e.target.slideIndex;
160		var targetLabel = "index"+(target);
161		
162		tl.timeScale(20);
163		tl.tweenTo(targetLabel, {onComplete:changeSlide});
164	}
165}
166
167
168function fadeOut(e)
169{
170	e.classList.remove('fade-in');
171	e.classList.add('fade-out');
172}
173
174function fadeIn(e) 
175{
176	e.classList.remove('fade-out');
177	e.classList.add('fade-in');
178}
179
180function emptyAllProgBars()
181{
182	var targetLabel = "index"+0;
183	tl.timeScale(20);
184	tl.tweenTo(targetLabel, {onComplete:changeSlide});
185}