Как сделать простую карусель, используя функции?

Question

Может ли кто-нибудь сделать меня простым, понятным JS для карусели. Я действительно не понимаю использование «этого», поэтому вы можете объяснить, что происходит?

div{ 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
div:nth-child(1) { 
 
    background-color: red; 
 
} 
 
div:nth-child(2) { 
 
    background-color: blue; 
 
} 
 
div:nth-child(3) { 
 
    background-color: green; 
 
} 
 
.no { 
 
    display: none; 
 
}

<div> 
 
    <div class="yes"></div> 
 
    <div class="no"></div> 
 
    <div class="no"></div> 
 
    <ul> 
 
    <li>left</li> 
 
    <li>right</li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <div class="yes"></div> 
 
    <div class="no"></div> 
 
    <div class="no"></div> 
 
    <ul> 
 
    <li>left</li> 
 
    <li>right</li> 
 
    </ul> 
 
</div>

Answer 1

div:nth-child(1) { 
background-color: red; 
} 

that means this CSS apply only on all first child div whose parent is <div> tag 

First parent div's inside four child , three div and one <Ul> so basically according to our CSS it apply it on first div (color red). 

second and third <div> block is hidden due to class ".no" containing display none property