0

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>

1 Resposta 1

1

Olá. Fiz algumas modificações no seu código e adicionei um script que acredito que faz o que você quer. Eu não usei a ideia de margin que você citou, eu fiz usando uma classe active para mostrar/esconder um item.

Segue o código:

var listasDeFrutas = document.querySelectorAll('.lista-de-frutas');


for (var i = 0; i < listasDeFrutas.length; i++){
  criarCarrossel(listasDeFrutas[i]);
}

function criarCarrossel(listaDeFrutas){
  var lis = listaDeFrutas.querySelectorAll('ul > li');
  var passar = listaDeFrutas.parentNode.querySelector('.passar');
  var voltar = listaDeFrutas.parentNode.querySelector('.voltar');
  var atual = 0;
  
  passar.onclick = function(){
    atual = ++atual % lis.length;
    
    for (var i = 0; i < lis.length; i++){
      lis[i].classList.remove('active');
    }
    
    lis[atual].classList.add('active');
  }
  
  voltar.onclick = function(){
    atual--;
    if ( atual < 0 ) atual = lis.length - 1;
    
    for (var i = 0; i < lis.length; i++){
      lis[i].classList.remove('active');
    }
    lis[atual].classList.add('active');
  }
}
* {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 {
   display: none;
   margin-right: 80px;
   margin-top: 5px;
}

.lista-de-frutas > ul li.active {
   display: block;
}

.controle {
   display: flex;
   padding: 0;
   box-sizing: border-box;
   justify-content: center;
   color: white;
}

.voltar, .passar {
   cursor: pointer;
}

.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 class="active">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 class="active">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 class="active">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 class="active">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>

Espero ter ajudado.

3
  • Olá! Muito obrigado pela resposta! O parentNode vai pegar apenas os elementos daquele conjunto armazenado pelo querySelectorAll. É isso? Sendo assim, se eu usar a variável que armazena o querySelectorAll com o parentNode... eu só irei selecionar o <li>, por exemplo, daquele index que eu informei. É assim?
    – Ivan Gomes
    1/05/2019 às 16:22
  • Não sei entendi sua pergunta. O parentNode pega o elemento pai de outro elemento na árvore do html. No caso, usei para pegar o li que contém a lista de frutas e o controle de cada carrossel. Note que na primeira linha eu seleciono todas as listas de frutas, mas dentro da função criarCarrossel eu utilizo apenas a lista que foi passada como parâmetro. O querySelector faz uma busca dentro de um elemento. Estou usando para buscar dentro do li devolvido com parentNode os elementos com classe passar e voltar. 1/05/2019 às 16:45
  • Certo! Não estou conseguindo aplicar bem ao meu caso real mas acredito que o problema sou eu. rsrs De qualquer forma você me mostrou o caminho das pedras. Vou estudar sobre esse código que você mandou pra ver se consigo aplicar ao meu caso. Muito obrigado pela ajuda e até mais!
    – Ivan Gomes
    2/05/2019 às 11:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .