JSFiddle - React, Tailwind, and code Playground
by Kazzkiq
HTML
<div class="carrossel-bloco">
<button class="carrossel-btn btnPrevious">←</button>
<div class="carrossel-itens">
<ul>
<li>Img1</li>
<li>Img2</li>
<li>Img3</li>
<li>Img4</li>
<li>Img5</li>
<li>Img6</li>
<li>Img7</li>
</ul>
</div>
<button class="carrossel-btn btnNext">→</button>
</div>
CSS
ul{
list-style:none;
padding:0;
margin:0;
}
.carrossel-bloco{
width:300px;
padding:10px;
margin-top:50px;
float:left;
background:#ccc;
transition:all 0.2s linear;
transform:skew(0deg,-10deg);
}
.carrossel-itens{
overflow:hidden;
float:left;
width:220px;
}
.carrossel-itens ul{
width:1500px;
}
.carrossel-itens ul li{
float:left;
margin-right:5px;
width:70px;
height:120px;
background:#eee;
}
.carrossel-btn{
float:left;
}