JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js"></script>
<pre>
<div class="container" >
<ul class="carousel">
  <li id="1">Pajan</li>
  <li id="2">Behroz</li>
  <li id="3">Mahram</li>
  <li id="4">Delpazir</li>
  <li id="5">Yeko Yek</li>
  <li id="6">Kaleh</li>
  <li id="7" >Tak Daneh</li>
</ul></div>
</pre>

<input name="" type="button" class="prev" value="prev"> 
<input name="" type="button" class="next" value="next">

CSS

ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	width: 42em;
	height: 24em;
}
li {
	height: 20em;
	width: 30em;
	background-color: #ccc;
	text-align: center;
	cursor: pointer;
}
li.roundabout-in-focus {
	cursor: default;
}
li span {
	display: block;
	padding-top: 6em;
}

#carbonads-container .carbonad {
	margin: 0 auto;
}

JavaScript

$('.carousel').roundabout({
		btnNext: ".next",
		btnPrev: ".prev",
		btnNextCallback:function(){
			var what=$('li.roundabout-in-focus').text()
			alert(what)
			},
		btnPrevCallback:function(){
			var what=$('li.roundabout-in-focus').text()
			alert(what)
			}	
		
		});