https://wealthforyou.in/js/JiSlider.js

1/****** JiSlider version 0.5.3 ******/
2// tested on Safari 8, Chrome 44, Firefox 44
3
4(function ($) {
5	$.fn.JiSlider = function (options) {
6		// prohibit stacking
7		var JiSlider = this;
8		var then = new Date().getTime();
9		// var UP = 'up', DOWN = 'down';
10
11		// animation
12		var Animate = function (slides, start, auto, time, stay, easing, reverse) {
13			this.slider = JiSlider;
14			this.slides = slides;
15			this.width = this.slider.width();
16			this.ul = this.slider.find('ul');
17			this.index = start;
18			this.auto = auto;
19			this.time = time;
20			this.stay = stay;
21			this.easing = easing;
22			this.reverse = reverse ? -1 : 1;
23			this.play = setInterval(this.autoroll.bind(this), this.stay);
24		}
25
26		Animate.prototype = {
27			init: function (options) {
28				$.extend(this, options);
29			},
30			roll: function (time) {
31				var left = -(this.index * this.width);
32
33				ul.css({
34					'-webkit-transform': 'translateX(' + left + 'px)',
35					'-webkit-transition': '-webkit-transform ' + time / 1000 + 's ' + this.easing,
36					'-ms-transform': 'translateX(' + left + 'px)',
37					'-ms-transition': '-ms-transform ' + time / 1000 + 's ' + this.easing,
38					'transform': 'translateX(' + left + 'px)',
39					'transition': 'transform ' + time / 1000 + 's ' + this.easing,
40				});
41
42				this.check();
43
44				if (this.controller) {
45					this.controller.find('.jislider__button[data-index=' + this.index + ']').addClass('jislider__on').css('background-color', setting.color);
46					this.controller.find('.jislider__button[data-index!=' + this.index + ']').removeClass('jislider__on').css('background-color', 'transparent');
47				}
48			},
49			autoroll: function () {
50				if (this.auto)
51					this.index += this.reverse;
52				this.roll(this.time);
53			},
54			check: function () {
55				var t = this;
56				if (this.index > this.slides) {
57					this.index = 1;
58					setTimeout(function () {
59						t.roll(0);
60					}, this.time);
61				} else if (this.index < 1) {
62					this.index = slides;
63					setTimeout(function () {
64						t.roll(0);
65					}, this.time);
66				}
67			},
68			control: function (index) {
69				if (this.timeCheck()) {
70					this.index = index;
71					this.reset();
72					this.roll(this.time);
73				}
74			},
75			timeCheck: function () {
76				var now = new Date().getTime();
77				if (now - then > this.time) {
78					then = now;
79					return true;
80				} else {
81					return false;
82				}
83			},
84			reset: function () {
85				clearInterval(this.play);
86				this.play = setInterval(this.autoroll.bind(this), this.stay);
87			},
88			resize: function (width) {
89				this.width = width;
90				this.reset();
91				this.roll(0);
92			}
93		}
94
95		// jquery element variable
96		var ul = this.find('ul');
97		var li = this.find('ul li');
98
99		// setting
100		var setting = $.extend({
101			auto:true,
102			start: 1,
103			time: 600,
104			stay: 4500,
105			controller: true,
106			easing: 'ease',
107			color: '#fff',
108			reverse: false,
109		}, options);
110		var jw = this.width();
111		var slides = this.find('ul li').length;
112
113		if (setting.start > slides) {
114			throw "Start value is bigger than number of slides";
115		}
116
117		// slider setup
118		var first = li.first().clone();
119		var last = li.last().clone();
120		ul.prepend(last);
121		ul.append(first);
122
123		this.css({
124			position: 'relative',
125			overflow: 'hidden'
126		});
127
128		ul.css({
129			width: (100 * (slides + 2)) + '%',
130			'-webkit-transform': 'translateX(' + -(setting.start * jw) + 'px)',
131			'-ms-transform': 'translateX(' + -(setting.start * jw) + 'px)',
132			'transform': 'translateX(' + -(setting.start * jw) + 'px)',
133		});
134
135		// selecting li tags with two clones
136		li = this.find('ul li');
137		var img = this.find('ul li img');
138
139		li.css({
140			width: (100 / (slides + 2)) + '%',
141		});
142
143		img.each(function () {
144			var div = $('<div>', {'class': 'jislider__img'}).css({
145				backgroundImage: 'url(' + $(this).attr('src') + ')',
146			});
147			$(this).after(div);
148			$(this).remove();
149		});
150
151		// animation
152		var animate = new Animate(slides, setting.start, setting.auto, setting.time, setting.stay, setting.easing, setting.reverse);
153
154		// controller
155		if (setting.controller) {
156			var leftArrow = $('<div>', {'class': 'jislider__left-arrow'}).click(function () {
157				animate.control(--animate.index);
158			});
159			var leftArrowTop = $('<div>', {'class': 'jislider__left-arrow__top'}).css({
160				backgroundColor: setting.color,
161			});

162			var leftArrowBottom = $('<div>', {'class': 'jislider__left-arrow__bottom'}).css({
163				backgroundColor: setting.color,
164			});
165
166			var rightArrow = $('<div>', {'class': 'jislider__right-arrow'}).click(function () {
167				animate.control(++animate.index);
168			});
169			var rightArrowTop = $('<div>', {'class': 'jislider__right-arrow__top'}).css({
170				backgroundColor: setting.color,
171			});
172			var rightArrowBottom = $('<div>', {'class': 'jislider__right-arrow__bottom'}).css({
173				backgroundColor: setting.color,
174			});
175
176			var controller = $('<div>', {'class': 'jislider__controller'}).css({
177				width: 20 * slides,
178			});
179			
180			var buttons = new Array();
181			for (var i = 0; i < slides; i++) {
182				buttons[i] = $('<div>', {'class': 'jislider__button', 'data-index': (i + 1)}).css({
183					border: '1px solid ' + setting.color,
184				}).click(function () {
185					var index = $(this).data('index')
186					animate.control(index)
187				});
188			}
189			this.append(leftArrow, rightArrow, controller);
190			leftArrow.append(leftArrowTop, leftArrowBottom);
191			rightArrow.append(rightArrowTop, rightArrowBottom);
192			controller.append(buttons);
193			animate.init({controller: controller});
194		}
195
196		animate.roll(0);
197
198		$(window).resize(function () {
199			jw = JiSlider.width();
200			animate.resize(jw);
201		});
202
203		return this;
204	}
205}(jQuery));