Make ul move using script only

Asked

Viewed 92 times

0

Hello!

I saw an example of carousel that use the feature of margin to simulate the movement of items.

How can I just with the script, do something similar, considering that the code repeats the structure?

I imagine if I put one event of "spend" at the pass button... he’ll move all the carousels. As it would be in this case, to make him pass the apple items without interfering with others?

* {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>

javascript java jquery html5 css3

1 answer

1


Hello. I made some modifications to your code and added a script that I believe does what you want. I didn’t use the idea of margin that you quoted, I did using a class active to show/hide an item.

Follows the code:

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>

I hope I’ve helped.

  • Hello! Thank you so much for the answer! parentNode will only take the elements of that set stored by querySelectorAll. Is that it? So, if I use the variable that stores querySelectorAll with parentNode... I will only select the <li>, for example, from that index that I reported. ?

  • I don’t know I understand your question. The parentNode takes the element father another element in the html tree. In this case, I used to get the li which contains the fruit list and the control of each carousel. Note that on the first line I select all the fruit lists, but within the function criarCarrossel I use only the list that was passed as parameter. O querySelector does a search inside an element. I’m using it to search inside the li returned with parentNode the elements with class passar and voltar.

  • Right! I’m not getting a good application to my real case but I believe the problem is me. rsrs Anyway you showed me the path of the stones. I will study about this code you sent to see if I can apply to my case. Thank you so much for your help and even more!

Browser other questions tagged javascript java jquery html5 css3

You are not signed in. Login or sign up in order to post.