JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<button data-trend="prev">prev</button>
<div class="viewport">
<ul id="list">
    <li class="op">01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
     <li>06</li>
    <li>07</li>
    <li>08</li>
     <li>09</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>
</ul>
</div>
<button data-trend="next">next</button>

CSS

.viewport {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 360px;
    height: 44px;
}

ul li {
    color:#fff;
    background: tan;
    padding: 5px 20px;;
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

ul {
   padding: 0;
   display: block; 
   position: absolute;
   top: 0; left: 0;
    
}

.op:last-child, .op:first-child {
    opacity: .5;
}

.op {
    background: red;
}

JavaScript

var listItems = $('#list>li'), 
    list = $('#list'), 
    viewport = $('.viewport'),
    maxCountItemsInViewport = 9,
    oneElWidth = listItems.eq(0).outerWidth()+4;

var itemsCount = listItems.length;
var listWidth = oneElWidth*(itemsCount+2);

// -- 
viewport.css('width', maxCountItemsInViewport*oneElWidth+'px');
list.css('width', listWidth+'px');

// --

$('button[data-trend]').on('click', function() {
    
	var trend = $(this).data('trend'),
    	cur = list.find('li.op'), 
        el,
    	i = listItems.index(cur);

	var where = (trend == 'prev') ? 'prev' : 'next';
    
    el = listItems.eq(i)[where](); 
    
    el.length && setItem(el);
    
    checkViewport(i);
    
});

listItems.on('click', function() {
	setItem($(this));
});

function checkViewport(n) {
    
    if (itemsCount < maxCountItemsInViewport) return;
    
    var center = Math.floor(maxCountItemsInViewport/2);
    
    if (n < 0) n = 0;
	if (n > itemsCount - 1) n = itemsCount - 1;

	if (n < center) {
		list.css('left', '0px');
	} else if (n > itemsCount - center) {
		//list.css('left', -((itemsCount - center - (center-1)) * oneElWidth)+'px');
	} else {
		list.css('left', -((n - (center-1)) * oneElWidth)+'px');
	}
}

function setItem(el) {
	listItems.removeClass('op');
	el.addClass('op');
}