Olá!
Eu vi um exemplo de carrossel que usar o recurso de margin para simular o movimento dos itens.
Como eu posso apenas com o script, fazer algo parecido, considerando que o código repete a estrutura?
Eu imagino que se eu colocar um evento de "passar" no botão de passar... ele vai movimentar todos os carrosséis. Como seria nesse caso, para fazer com que ele passe os itens de maçã, sem interferir nos outros?
* {list-style:none}
.cesta-de-frutas {
padding:5px;
width: 150px;
background-color: blue;
overflow: hidden;
}
.lista-de-frutas {
height: 30px;
display: flex;
background-color: white;
margin: 10px 0;
float: none;
flex-wrap: nowrap;
}
.lista-de-frutas > ul {
display: flex;
white-space: nowrap;
}
.lista-de-frutas > ul li {
margin-right: 80px;
margin-top: 5px;}
.controle {
display: flex;
padding: 0;
box-sizing: border-box;
justify-content: center;
color: white;
}
.voltar {
margin-right: 30px;
}
<div class="recipiente">
<div class="conteiner">
<div class="row-fluid">
<ul class="cesta-de-frutas">
<li>
<div class="lista-de-frutas">
<ul>
<li>Maçã tipo 1</li>
<li>Maçã tipo 2</li>
<li>Maçã tipo 3</li>
<li>Maçã tipo 4</li>
<li>Maçã tipo 5</li>
</ul>
</div>
<ul class="controle">
<li class="voltar"> voltar </li>
<li class="passar"> passar </li>
</ul>
</li>
<li>
<div class="lista-de-frutas">
<ul>
<li>Banana tipo 1</li>
<li>Banana tipo 2</li>
<li>Banana tipo 3</li>
<li>Banana tipo 4</li>
<li>Banana tipo 5</li>
</ul>
</div>
<ul class="controle">
<li class="voltar"> voltar </li>
<li class="passar"> passar </li>
</ul>
</li>
<li>
<div class="lista-de-frutas">
<ul>
<li>Abacate tipo 1</li>
<li>Abacate tipo 2</li>
<li>Abacate tipo 3</li>
<li>Abacate tipo 4</li>
<li>Abacate tipo 5</li>
</ul>
</div>
<ul class="controle">
<li class="voltar"> voltar </li>
<li class="passar"> passar </li>
</ul>
</li>
<li>
<div class="lista-de-frutas">
<ul>
<li>Uva tipo 1</li>
<li>Uva tipo 2</li>
<li>Uva tipo 3</li>
<li>Uva tipo 4</li>
<li>Uva tipo 5</li>
</ul>
</div>
<ul class="controle">
<li class="voltar"> voltar </li>
<li class="passar"> passar </li>
</ul>
</li>
</ul>
</div>
</div>
</div>