JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/305259

by Lhankor_Mhy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.js"></script>
<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">Some section</div>
		<div class="ms-section">Some section</div>
		<div class="ms-section">Some section</div>
	</div>
	<div class="ms-right">
		<div class="ms-section">Some section</div>
		<div class="ms-section">Some section</div>
		<div class="ms-section">Some section</div>
	</div>
</div>

CSS

.ms-left .ms-section{
  background: pink;
}

JavaScript

$('#multiscroll').multiscroll({easing:"linear",
navigation: true, // 右のナビゲーションの有効化
navigationPosition: 'right', // ナビゲーションの位置
navigationTooltips: ['A', 'B', 'C'], // ナビゲーションのツールチップ
navigationColor: '#7ECCDE',
  });