JSFiddle - React, Tailwind, and code Playground

by Christoph SchĂĽtz

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.multiscroll.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery.multiscroll.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/vendors/jquery.easings.min.js"></script>
<div id="myContainer">

	<div class="ms-left">
		<div class="ms-section" id="left1">
			<h1>Left 1</h1>
		</div>

		<div class="ms-section" id="left2">
			<h1>Left 2 </h1>
		</div>

		<div class="ms-section" id="left3">
			<h1>Left 3</h1>
		</div>
	</div>
	
	<div class="ms-right">
		<div class="ms-section" id="right1">
			<h1>Right 1</h1>
		</div>

		<div class="ms-section" id="right2">
			<h1>Right 2</h1>
		</div>

		<div class="ms-section" id="right3">
			<h1>Right 3</h1>
		</div>
	</div>	
</div>

JavaScript

$('#myContainer').multiscroll({
            	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            	anchors: ['first', 'second', 'third'],
            	menu: '#menu',
            	navigation: true,
            	navigationTooltips: ['One', 'Two', 'Three'],
            	loopBottom: true,
            	loopTop: true,
				onLeave: function(index, direction){
					//after leaving section 2
					if(index == '2' && direction =='down'){
						alert("Going to section 3!");
					}

					else if(index == '2' && direction == 'up'){
						alert("Going to section 1!");
					}
				}
            });