JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<a href="#" class="next">Next</a>
<a href="#" class="prev">prev</a>

<div class="container">
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
</ul>
</div>

CSS

html{
		padding:0;
		margin:0;
	}
	.container { 
		width: 380px;
		overflow: hidden;
	}
	ul {
		width: 1260px;		
		list-style: none;
		padding:0;
		position: relative;
	}
	li {
		width: 40px;
		border: 1px dashed #eee;
		float: right;
	}

JavaScript

var setDirection = 1;//1- RTL, 0- LTR
var setSize = 9;
var startIndex;
var endIndex;
var $List = $('ul');
var itemCount = $List.find('li').length;
var totalSets = Math.ceil(itemCount / setSize);
var activeSet = 1;

function setIndexes() {
	if(itemCount <= setSize) {
		startIndex = 1;
		endIndex = itemCount;
	} else {
		if(setDirection == 1) {			
			startIndex = ((activeSet - 1) * setSize + 1);
			endIndex = (startIndex + setSize) - 1;
			if(endIndex > itemCount) {
				setDirection = 0;
				endIndex = itemCount;
				if(endIndex > setSize){
					startIndex = (endIndex - setSize) + 1 
				}
			}
		} else {
			endIndex = itemCount - (totalSets - activeSet) * setSize;
			if(endIndex > itemCount) {
				endIndex = totalCount;
			}
			if(endIndex > setSize) {
				startIndex = (endIndex - setSize) + 1;
			} else {
				endIndex = setSize;
				startIndex = 1;
				setDirection = 1;
			}
		}
	}    
}

$('.next').click( function(event) {
	event.preventDefault();
	animateCarousel(1);
});

$('.prev').click( function(event) {
	event.preventDefault();
	animateCarousel(-1);
});

function animateCarousel(offset){
	if((activeSet + offset) >= 1 && (activeSet + offset) <= totalSets) {
		activeSet = activeSet + offset;
		setIndexes()
		$List.animate({
			'left': "-" + ((itemCount - endIndex) * $List.find('li').outerWidth()) + "px"
		})
	}
}

function navigationClick(currentItemIndex){
	if(currentItemIndex < startIndex) {//Previous page
		animateCarousel(-1);
	} else if (currentItemIndex > endIndex) {//Next page
		animateCarousel(1);
	}
}

function setActiveIndex(activeIndex)
{
    setDirection = 1;
	activeSet = Math.ceil(activeIndex / setSize);
	animateCarousel(activeSet);
}
animateCarousel(activeSet)