JSFiddle - React, Tailwind, and code Playground

by shravanimmy

HTML

<link rel="stylesheet" href="http://darsa.in/sly/examples/css/horizontal.css">
<script src="http://darsa.in/sly/js/sly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="wrap">
			<h2>Force Centered <small>- active item is always centered, and middle item is always activated</small></h2>

			<div class="scrollbar">
				<div class="handle" style="transform: translateZ(0px) translateX(0px); width: 190px;">
					<div class="mousearea"></div>
				</div>
			</div>

			<div class="frame" id="forcecentered" style="overflow: hidden;">
				<ul class="clearfix" style="transform: translateZ(0px) translateX(457px); width: 6840px;">
					<li class="active">0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
					<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
					<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>
					<li>28</li><li>29</li>
				</ul>
			</div>

			<div class="controls center">
				<button class="btn prev disabled" disabled=""><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>
		</div>

CSS

.wrap {
    position: relative;
    margin: 3em 0;
}

JavaScript

jQuery(function($){
	'use strict';
    
    var $frame = $('#forcecentered');
		var $wrap  = $frame.parent();

		// Call Sly on frame
		$frame.sly({
			horizontal: 1,
			itemNav: 'forceCentered',
			smart: 1,
			activateMiddle: 1,
			activateOn: 'click',
			mouseDragging: 1,
			touchDragging: 1,
			releaseSwing: 1,
			startAt: 0,
			scrollBar: $wrap.find('.scrollbar'),
			scrollBy: 1,
			speed: 300,
			elasticBounds: 1,
			easing: 'easeOutExpo',
			dragHandle: 1,
			dynamicHandle: 1,
			clickBar: 1,

			// Buttons
			prev: $wrap.find('.prev'),
			next: $wrap.find('.next')
		});
});