Pulmo - Scroller test

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.2/jquery.mobile-events.min.js"></script>
<section id="partners">
	<div>
		<h2>Our partners</h2>
		<div>
			<ul>
				<li class="n1 first" style="margin-left: 0px;">
					<span class="partner-image" title="Provincie Groningen">
						<span class="partner-title">Provincie Groningen</span>
					</span>
				</li><li class="n2" style="margin-left: 0px;">
					<span class="partner-image" title="Wellinq Medical">
						<span class="partner-title">Wellinq Medical</span>
					</span>
				</li><li class="n3" style="margin-left: 0px;">
					<span class="partner-image" title="Matrix Requirements">
						<span class="partner-title">Matrix Requirements</span>
					</span>
				</li><li class="n4" style="margin-left: 0px;">
					<span class="partner-image" title="Gemeente Groningen">
						<span class="partner-title">Gemeente Groningen</span>
					</span>
				</li><li class="n5" style="margin-left: 0px;">
					<span class="partner-image" title="Carduso Capital">
						<span class="partner-title">Carduso Capital</span>
					</span>
				</li><li class="n6" style="margin-left: 0px;">
					<span class="partner-image" title="EFRO-SNN">
						<span class="partner-title">EFRO-SNN</span>
					</span>
				</li><li class="n7 last" style="margin-left: 0px;">
					<a href="http://www.appliedbiosignals.com/" target="_blank" class="partner-image" title="Applied Biosignals">
						<span class="partner-title">Applied Biosignals</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</section>

<section id="partners2">
	<div>
		<h2>Our partners</h2>
		<div>
			<ul>
				<li class="n1 first" style="margin-left: 0px;">
					<span class="partner-image" title="Provincie Groningen">
						<span class="partner-title">Provincie Groningen</span>
					</span>
				</li><li class="n2" style="margin-left: 0px;">
					<span class="partner-image" title="Wellinq Medical">
						<span class="partner-title">Wellinq...

SCSS

$colors: (
	"purple": #6E4397,
	"iceblue": #97C1E0,
	"darkgrey": #202024,
	"white": #ffffff,
	"grey": #f0f0f0,
	"lightergrey": #f8f8f8,
	"lightgrey": rgba(0,0,0,.05), 
	"error": #c63939,
	"warning": #D2A428,
	"success": #29a36c,
);
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
}

html {
	overflow-y: scroll;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.2;
	background-color: map-get($colors, 'lightergrey');
	// overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Dosis', sans-serif;
	font-weight: 700;
	margin: 1em 0 .5em;
	color: map-get($colors, 'purple');
}

h1 {
	font-size: 2em;
}

a {
	color: map-get($colors, 'purple');

	&:hover, &:focus, &:active {
		color: map-get($colors, 'iceblue');
	}
}

ul {
	margin-left: 1.5em;
}


.wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}


#partners {
	background-color: map-get($colors, 'iceblue');

	$partner-spacing: 2em;
	
	> div {
		@extend .wrapper;
		
		padding: 1.5em $partner-spacing/2;

		> h2 {
			margin-top: 0;
			width: 100%;
			text-align: center;
			color: map-get($colors, 'white');
		}

		> div {
			position: relative;
			display: block;
			overflow: hidden;
			height: 180px;
			
			> ul {
				counter-reset: slide_nr;
				position: absolute;
				left: 0px;
				top: 0px;
				//display: inline;
				width: 100%;
				list-style: none;
				height: 100%;
				white-space: nowrap;
				margin: 0;
				
				&.initiated {
					//transform: translate(-33.33333%, 0);
				}

				> li {
					display: inline-block;
					flex: 1 1 0px;
					height: 100%;
					vertical-align: top;
					padding: 0 $partner-spacing/2;
					width: 20%;
					white-space: nowrap;

					@media all and (max-width: 1050px) {
						width: 25%;
					}
					@media all and (max-width: 840px) {
						width: 33.333%;
					}
					@media all and (max-width: 580px) {
						width:...

JavaScript

(function ( $ ) {
	$.fn.debug = function() {
		debugger;
		return this;
	};
})( jQuery );

/**
 * jQuery vhwScroller plugin
 * (c) 2020 Philip van Heemstra
 *
 * To do:
 * - Pause/resume
 * - FIX: what if less items than visible (on init/start/resume/resize)
 * - fading
 * - grids
 * - nav arrows
 * - nav bullets
 * - FIX: can per_item be more then visible_items ?
 * - FIX: swipe diff same as per_item ?
 * - FIX: on tapend: snap based on last per_item scroll & offset
 * - (S)CSS classes (re)write for standardized attribution
 *
 */
(function ( $ ) {

	$.fn.vhwScroller = function( action, params ) {

		var funcs = {

			'init': function( params ) {
				// Setup configuration
				var options = $.extend( true, // deep copy
					$.fn.vhwScroller.defaults,
					params,
					{
						// Properties and helper attributes
						element: $( this ),
						slide_size: 0,
						scroll_offset: 0,
						scroll_all_visible: false,
						scroll_direction: 0,
						scroll_axis: 'x',
						scroll_axis_attr: 'left',
						has_dragged: false,
						drag_start_time: false,

						// Counts
						total_slides: 0,
						all_slides: 0,
						visible_slides: 0,

						// States
						is_paused: true,
						is_scrolling: false,
						is_snapping: false,

						// Timers
						scroll_next_timer: null,
					}
				);

				// Check scroller contents
				var $div = $( this );
				var $ul = $div.find('> ul');
				if ( 0 == $ul.length ) {
					return;
				}
				var $lis = $ul.find('> li');
				if ( 0 == $lis.length ) {
					return;
				}

				// Register scroller
				$div.data('vhw_scroller_idx', $.fn.vhwScroller.scrollers.length );
				$.fn.vhwScroller.scrollers.push( $.extend( true, {}, options) );
				options = $.fn.vhwScroller.scrollers[ $.fn.vhwScroller.scrollers.length - 1 ];

				// Process scroller preferences
				options.mode = options.mode.split('-');
				options.scroll_direction = (
					( options.mode.indexOf('left') >= 0 || options.mode.indexOf('up') >= 0 ) ?
					-1 :
					(
						(...