https://www.romvarirealty.com/scripts/ylopo-scroller.js

1/*
2	This is for generic horizontal scrolling of items.
3
4	The "Boxes" are the item containers. They must only have a right-margin to separate the items.
5	The right-margin of the last element will be automatically removed by the script to force proper scroller layout.
6
7	The HTML structure for the scroller is below:
8
9		<div class="ylopo-scroller">
10			<div class="left-arrow"></div>
11			<div class="right-arrow"></div>
12			<div class="ylopo-scroller-outer">
13				<div class="ylopo-scroller-inner">
14					<div class="ylopo-scroller-box">
15						[item html]
16					</div>
17					<div class="ylopo-scroller-box">
18						[item html]
19					</div>
20					<div class="ylopo-scroller-box">
21						[item html]
22					</div>
23				</div>
24			</div>
25		</div>
26*/
27
28(function(){
29
30	function YlopoScroller($thisScroller){
31
32		var idx = 0;
33
34		var $boxes,
35			$scrollOuter,
36			$scroller,
37			margin,
38			boxW,
39			boxWstart,
40			resizeTmr,
41			scrollerWidth,
42			maxItemHeight = 0;
43
44		const isPlugin = $thisScroller.parent().hasClass('ylopo-plugin')
45
46		function scrollItem(direction){
47
48			var	containerOffset, containerW, left, scrollerWidth, newLeft;
49
50			if (resizeTmr){
51				clearTimeout(resizeTmr)
52			}
53
54			resizeTmr = undefined;
55			containerOffset = $scrollOuter.offset().left;
56			containerW = $scrollOuter.width();
57			left = parseFloat($scroller.css('left'));
58			scrollerWidth = $scroller.width();
59
60			idx = idx + direction;
61			if (idx <= 0){
62				idx = 0
63				$thisScroller.find('.left-arrow').hide();
64			} else {
65				$thisScroller.find('.left-arrow').show();
66			}
67			if (idx >= $boxes.length-1){
68				idx = $boxes.length-1
69				$thisScroller.find('.right-arrow').hide();
70			} else {
71				$thisScroller.find('.right-arrow').show();
72			}
73
74			newLeft = -(idx * (boxW + margin));
75
76			if (newLeft < -(scrollerWidth - containerW) ) {
77				newLeft = -(scrollerWidth - containerW);
78			}
79
80			if(newLeft == 0) {
81				$thisScroller.find('.left-arrow').hide();
82			}
83			if(newLeft == -(scrollerWidth - containerW)) {
84				$thisScroller.find('.right-arrow').hide();
85			}
86
87			$scroller.css('left', newLeft);
88		}
89
90
91		function windowResize(){
92			if (resizeTmr){
93				clearTimeout(resizeTmr);
94			}
95
96			resizeTmr = setTimeout(function(){
97
98				idx = 0;
99
100				var marginR = parseFloat($boxes.first().css('margin-right'),10);
101				var marginL = parseFloat($boxes.first().css('margin-left'),10);
102				margin = marginL + marginR;
103
104				boxW = $boxes.map(function(i,o){
105					maxItemHeight = Math.max(maxItemHeight, $(o).height());
106					return $(o).width()
107				}).sort()[0];
108
109				$scrollOuter.css('height', maxItemHeight);
110
111				boxWstart = boxW;
112
113				var scrollOuterW = $scrollOuter.width();
114
115				scrollerWidth = ($boxes.length * (boxW + margin))// - (marginR + marginL);
116
117				$scroller.css({
118					width	: scrollerWidth,
119					left	: 0,
120					overflow: 'hidden'
121				});
122
123				if ( $scrollOuter.width() > $scroller.width() || $boxes.length < 2){
124					$thisScroller.find('.left-arrow,.right-arrow').hide();
125				} else {
126					$thisScroller.find('.left-arrow,.right-arrow').show();
127				}
128
129				var scrollerWidth = $scroller.width();
130				var scrollOuterWidth = $scrollOuter.width();
131
132				if (scrollerWidth < scrollOuterWidth) {
133					$scroller.css('left',0)
134				} else {
135					scrollLeft();
136				}
137
138
139			}, 100)
140		}
141
142		function scrollLeft(evt){
143			scrollItem(-1);
144		}
145
146		function scrollRight(evt){
147			scrollItem(1);
148		}
149
150		function setScrollMobile(delta){
151			if(delta === -1){
152				scrollItem(-1);
153			} else if(delta === 1){
154				scrollItem(1);
155			}
156		}
157
158		function initScroller() {
159
160//			$boxes.last().css('margin',0);
161			$boxes = $thisScroller.find('.ylopo-scroller-box');
162
163			$scrollOuter = $thisScroller.find('.ylopo-scroller-outer');
164			$scroller = $thisScroller.find('.ylopo-scroller-inner');
165
166			$thisScroller.find('.left-arrow').bind('mousedown', scrollLeft);
167			$thisScroller.find('.right-arrow').bind('mousedown', scrollRight);
168
169			$(window).on('resize', windowResize);
170
171			windowResize();
172
173			if (isMobile.any) {
174				window.initHammerVerticalSwipe($scrollOuter[0], setScrollMobile);
175			}
176		}
177
178		initScroller();
179
180		$thisScroller.on('rescan',function(evt){
181			$boxes = $thisScroller.find('.ylopo-scroller-box');
182			windowResize();
183		});
184
185		$(window).on('load',function(evt){
186			if(!isPlugin){
187				$boxes = $thisScroller.find('.ylopo-scroller-box');
188				windowResize();
189			}
190		});
191	}
192
193	//----------------------------------------------------------------
194
195	$('.ylopo-scroller').each(function(i,o){
196		var $thisScroller = $(o);
197		YlopoScroller($thisScroller)
198	})
199
200	//----------------------------------------------------------------
201
202
203})();