JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<div class="outside-buttons">
<div class="prev">
Previous</div>
<div class="next">
Next</div>
</div>

<div class="parent">
<div class="childclass">
some content
</div>
<div class="childclass">
some content 2
</div>
<div class="childclass">
some content 3
</div>
<div class="childclass">
some content 4
</div>
<div class="childclass">
some content 5
</div>
<div class="childclass">
some content 6
</div>
<div class="childclass">
some content 7
</div>
<div class="childclass">
some content 8
</div>
<div class="childclass">
some content 9
</div>
<div class="childclass">
some content 10
</div>
<div class="childclass">
some content 11
</div>
</div>

CSS

.childclass {
height: 100px;
display: inline-block;
background: #e3e3e3;
margin: 10px;
}

.current { display: block; }


.childclass { clear: none !important;
display: inline-block;
white-space: nowrap;
	width: 25% !Important;
	float: none;
}

.parent {
	overflow-x: hidden;
overflow-y: hidden;
  white-space: nowrap !Important;
	width: 100%;
	
}

JavaScript

var $zDiv = $('.childclass'),
    $prNx = $('.prev, .next'),
    $btns = $('.zanc > a'),
    n = $zDiv.length,
    c = 0; // current
    d = 4; //number of items

function toggView(){ 
  // content:
  $zDiv.hide();
  for(i=0;i<d && i+c<n;i++){
  	$zDiv.eq(i+c).show(); 
  }
  // buttons:
  $prNx.show();
  if(c<=0){
    $('.prev').hide(); 
  }
  if(c+3>=n-1){
    $('.next').hide(); 
  } 
}
toggView();

$prNx.click(function(){ 
  c = $(this).hasClass('next') ? c += 4 : c -= 4;
  toggView();
});

$btns.click(function( e ){
   c = $(this).index();
   toggView();
});